CSS
body{ margin:50px; }
a{
transition: color .3s ease;
background: #e73b33;
color: #fff;
margin: 0 auto;
height: 25px;
display: inline-block;
perspective: 1000px;
position: relative;
text-decoration: none;
box-sizing: border-box;
z-index: 10
}
a span{
height: 25px;
text-transform: uppercase;
text-align: center;
font-size: 12px;
font-weight: 600;
padding: 2px 10px;
background: #e73b33;
color: #fff;
line-height: 22px;
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
transition: transform .3s;
transform-origin: 50% 0;
transform-style: preserve-3d;
}
a span:before{
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #000;
content: attr(data-hover);
transition: background .3s;
transform: rotateX(-90deg);
transform-origin: 50% 0;
line-height: 25px;
}
a:hover span{
transform: rotateX(90deg) translateY(-22px);
}
a:hover span::before{
background: #e73b33;
}
