CSS text transform transition - html

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>