<a class="btn" href="#link">
  <i>H</i><i>o</i><i>v</i><i>e</i><i>r</i>
  <i>t</i><i>h</i><i>e</i>
  <i>B</i><i>u</i><i>t</i><i>t</i><i>o</i><i>n</i>
</a>

@import url(https://fonts.googleapis.com/css?family=Oswald:400);

html {
  font-size: 62.5%;
}

body {
  background-color: #333;
}

.btn {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  // letter-spacing: .2rem;
  text-decoration: none;
  overflow: hidden;
  display: inline-block;
  padding: 0 4rem 0 3.8rem;
  color: #FFF;
  background: none;
  border: 1px solid #FFF;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 150%;
    background: #FFF;
    pointer-events: none;
    transform: translate3d(0, 45px, 0);
    transition: all 0.3s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  i {
    font-style: normal;
    line-height: 4.5rem;
    display: inline-block;
    height: 100%;
    padding-left: 1px;
    padding-right: 1px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    &:hover {
      transform: translate3d(0, -6px, 0);
    }
  }
  &:hover {
    color: #333;
    &:after {
      transform: translate3d(0, 0, 0);
    }
  }
}