<a>
  <span>T</span>
  <span>E</span>
  <span>C</span>
  <span>H</span>
  <span>_</span>
  <span>B</span>
  <span>U</span>
  <span>T</span>
  <span>T</span>
  <span>O</span>
  <span>N</span>
</a>

//CONFIG
$time: 250ms;
$number: 3;
$ease: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$move: 2em;
$color: blue;
$font: 'Roboto Condensed', sans-serif;

//STYLES
html{
  padding: 25vh 10vw;
  text-align: center;
}
a{
  cursor: pointer;
  font-family: $font;
  font-weight: 900;
  user-select: none;
  color: $color;
  font-size: 0;
  transform: translate3d(0,0,0);
  filter: blur(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  span{
    font-size: 40px;
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    transition: transform $ease $time;
    padding: 0 0.1em;
    
    @for $i from 0 through $number{
      &:nth-child(#{$i}n){ transition-delay: $time*$i/$number;}
      &:nth-child(#{$i}n):after{ transition-delay: $time*$i/$number;}
    }
    &:after{
      content: '';
      position: absolute;
      top: 100%;
      left: -1%;
      width: 102%;
      height: $move;
      background: $color;
      transform-origin: top center;
      transform: scaley(0.1);
      transition: transform $ease $time;
    }
  }
  &:hover{
    span{
      transform: translateY(-$move/2);
      &:after{ transform: scaleY(1);}
    }
  }
  &:active{
    span{
      transform: translateY(0); 
      transition: transform $ease $time/2;
      transition-delay: 0 !important;
      &:after{
        transform: scaleY(0.5);
        transition: transform $ease $time/2;
        transition-delay: 0 !important;
      }
    }
  }
  
}