- word = 'Thanks'
%a.h-button.centered{'data-text'=>"Hover me","href"=>"#","aria-label"=>"#{word}"}
  - word.split(//).each do |letter|
    %span #{letter}

@import url('https://fonts.googleapis.com/css?family=Roboto:900')
$letters: 6

body
  background: #111
  
a
  font-family: 'Roboto', sans-serif
  font-weight: 900
  color: black
  text-decoration: none
  
.centered
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  
.h-button
  background: white
  padding: 20px
  width: 250px
  text-align: center
  
  span
    display: inline-block
    min-width: 0.30em
    text-transform: uppercase
    transition: .25s cubic-bezier(0.5,-1, 0.5, 2)
    opacity: 0
    transform: translate(0,-20px)
    
  &:before
    content: attr(data-text)
    position: absolute
    width: 100%
    left: 0
    transition: .25s cubic-bezier(0.5,-1, 0.5, 2)
    text-transform: uppercase
    letter-spacing: 3.5px
    opacity: 1
    transform: translate(0,0px)
    
  &:hover,&:focus
    &:before
      opacity: 0
      transform: translate(0, 20px) 
  
    span
      opacity: 1
      transform: translate(0, 0)
   
    @for $i from 1 through $letters
      span:nth-child(#{$i})
        transition-delay: 0.025s * $i
   

// Nothing here ¯\_(ツ)_/¯