Saltar al contenido

Botón Animado en CSS3 Puro – No JavaScript –

11 mayo, 2018
botón animado en css3

Para hoy vamos a aprender a crear un sencillo pero profesional botón animado en css3, sin necesidad de utilizar JavaScript.

Botón Animado en CSS3

Existen mutiltud de animaciones que podemos realizar en CSS3 para animar un botón. El botón fantasma, tal y como lo denomina su autor, nos permite crear un efecto al pasar el ratón sobre el botón, cambiando el fondo al color del texto, y el texto al color del fondo. Todo con una bonita y suave animación.

Es bastante sencillo de realizar y únicamente debemos de realizarlo paso a paso hasta llegar al resultado final.

El html

Para comenzar crearmos dos botones bajo la clase bttn y bttn-dark. Éstas clases nos permitirán posteriormente darle estilos a nuestros botones y realizar las animaciones.

El SCSS

Utilizaremos SASS, que para aquellos que lo desconozcan es sencillamente un meta-lenguaje para escribir CSS que se utiliza para describir el estilo de un documento de manera limpia y estructural.

Es importante reseñar que la extensión que deberemos de utilizar será .scss, en vez de, css.

Resultado Final

Así es como quedaría nuestro bóton animado en css3.

See the Pen Botones Animados en CSS sin JavaScript by Antonio José (@ajmorales73) on CodePen.

Si te gustó déjame tu like, comparte con tus amigos en las redes sociales, y si tienes cualquier duda, o sugerencia me la dejes en los comentarios. ¡Gracias!