Button hover effect only CSS

Button hover effect with css | Botón efecto hover cambia el texto al pasar el cursor solo con css

By Adam


HTML

<a aria-label='Thanks' class='h-button centered' data-text='Hover me' href='#'> <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>


CSS

a{font-family:Roboto,sans-serif;font-weight:900;color:#000;text-decoration:none}
.centered{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.h-button{background:#fff;padding:20px;width:250px;text-align:center}
.h-button span{display:inline-block;min-width:.3em;text-transform:uppercase;transition:.25s cubic-bezier(0.5,-1,.5,2);opacity:0;transform:translate(0,-20px)}
.h-button:before{content:attr(data-text);position:absolute;width:100%;left:0;transition:.25s cubic-bezier(0.5,-1,.5,2);text-transform:uppercase;letter-spacing:3.5px;opacity:1;transform:translate(0,0)}
.h-button:focus:before,.h-button:hover:before{opacity:0;transform:translate(0,20px)}
.h-button:focus span,.h-button:hover span{opacity:1;transform:translate(0,0)}
.h-button:focus span:nth-child(1),.h-button:hover span:nth-child(1){transition-delay:.025s}
.h-button:focus span:nth-child(2),.h-button:hover span:nth-child(2){transition-delay:.05s}
.h-button:focus span:nth-child(3),.h-button:hover span:nth-child(3){transition-delay:.075s}
.h-button:focus span:nth-child(4),.h-button:hover span:nth-child(4){transition-delay:.1s}
.h-button:focus span:nth-child(5),.h-button:hover span:nth-child(5){transition-delay:.125s}
.h-button:focus span:nth-child(6),.h-button:hover span:nth-child(6){transition-delay:.15s}
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!