<div class="container">
  <p>
    Having a bad day? Try going to <a href="http://www.pixelthoughts.co/">Pixel Thoughts</a>, a website created by <a href="https://twitter.com/marcbalaban">Marc Balahan</a> to simulate what it’s like to let go of a negative thought.
  </p>
</div>

body {
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #cd4436;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

p {
  line-height: 1.5;
}

a {
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

a[href="http://www.pixelthoughts.co/"]::before, a[href="http://www.pixelthoughts.co/"]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5em;
  height: 3.5em;
  border: 1em solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  content: '';
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  transform: translateX(-50%) translateY(-50%) scale(0.2);
}
a[href="http://www.pixelthoughts.co/"]::after {
  content: '\01F31F';
  border-width: 0.25em;
  transform: translateX(-50%) translateY(-50%) scale(0.8);
}
a[href="http://www.pixelthoughts.co/"]:hover::before, a[href="http://www.pixelthoughts.co/"]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
}