CSS text transform transition

Question

I would like to do an effect similar to the first part of that effect ("HOVER ME") on a div. In my case, I wanted the first text to move down and the other to appear from above when the mouse is hover the div, but without the separate letters and exactly as the first transform effect occurs. I also wanted to have a reverse transition to when the user took the mouse off the top. My big problem is that I don't understand Haml and SASS, so I would like someone's help to develop this effect in HTML and CSS.

Haml code:

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

SASS code:

@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
   

Example Effect

Answer 1

You have to compile the source to use it's content,

Here is a compiled version of your source.

@import url("https://fonts.googleapis.com/css?family=Roboto:900");
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;
}
.h-button span {
  display: inline-block;
  min-width: 0.3em;
  text-transform: uppercase;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  opacity: 0;
  transform: translate(0, -20px);
}
.h-button:before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  text-transform: uppercase;
  letter-spacing: 3.5px;
  opacity: 1;
  transform: translate(0, 0px);
}
.h-button:hover:before, .h-button:focus:before {
  opacity: 0;
  transform: translate(0, 20px);
}
.h-button:hover span, .h-button:focus span {
  opacity: 1;
  transform: translate(0, 0);
}
.h-button:hover span:nth-child(1), .h-button:focus span:nth-child(1) {
  transition-delay: 0.025s;
}
.h-button:hover span:nth-child(2), .h-button:focus span:nth-child(2) {
  transition-delay: 0.05s;
}
.h-button:hover span:nth-child(3), .h-button:focus span:nth-child(3) {
  transition-delay: 0.075s;
}
.h-button:hover span:nth-child(4), .h-button:focus span:nth-child(4) {
  transition-delay: 0.1s;
}
.h-button:hover span:nth-child(5), .h-button:focus span:nth-child(5) {
  transition-delay: 0.125s;
}
.h-button:hover span:nth-child(6), .h-button:focus span:nth-child(6) {
  transition-delay: 0.15s;
}

<a aria-label='Thanks' class='h-button centered' data-text='Hover me' href='#'>
  <span>T</span>
  <span>h</span>
  <span>a</span>
  <span>n</span>
  <span>k</span>
  <span>s</span>
</a>