JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
<a href="#"> 
    REGISTRARSE
</a> 
</div>

CSS

.button {
    width: 300px;
    height: 55px;
    display: inline-block;
    text-align: center;
    background-color: #00ACE4;
    border-radius: .15em;
    vertical-align:middle;
    position:relative;
}

div.button:before{
    content:"";
    display:block;
    width:296px;
    height: 22.5px;
    color:black;
    border-radius: .15em;
    background-color: rgba(250,250,250,.6);
    position:absolute; left: 2px; top:2px;
    
    -webkit-transition: top .5s -.1s;
     -moz-transition: top .5s -.04s;
     -o-transition: top .5s -.04s;
     -ms-transition: top .5s -.04s;
      transition: top .5s -.04s;
}


.button a{
    color: #FFF; 
    display:block;
    font: bold 1.5em 'klavika_rgregular', helvetica, sans-serif; 
    height:55px;
    line-height:55px;
    position:relative;
    text-decoration: none;
    text-shadow:1px 1px 1px #333;
    width:100%;
    z-index:100;
    
        -webkit-transition: color .5s;
     -moz-transition: color .5s -.04s;
     -o-transition: color .5s -.04s;
     -ms-transition: color .5s -.04s;
      transition: color .5s;
}
div.button:hover:before{
    background-color: rgba(250,250,250,.3);
    top:30.5px;
}
.button a:hover{
    color:#333;
    text-shadow:-1px -1px 1px #eee;
}