Crea un botón de latido

, Author

Para un botón principal o incluso para un botón que quieras destacar, ofrecer este efecto de latido puede dar una sensación muy moderna a tu web. Descubre en este artículo cómo conseguir este efecto.

Paso 1

Comencemos con el código HTML.

<a href="#" class="coeur">BELIEVEMY</a>

Sólo necesitamos un enlace.

Paso 2

Vamos a ocuparnos del enlace.

.coeur { text-align: center; padding: 12px 24px; color: #fff; border-radius: 5px; background: #F34D4D; box-shadow: 0 0 0 0 rgba(255, 71, 84, .7); animation: battement 2s infinite cubic-bezier(.66, 0, 0, 1); text-decoration: none;}

En este paso, utilizamos una animación CSS a través de la propiedad animation.

Especificamos que queremos usar la función cubic-bezier, que es una función para hacer que la velocidad de la animación cambie durante su ejecución.

Así, gracias a los valores que le damos a la función, podemos hacer que la animación empiece rápido con el primer tiempo y luego se desvanezca al final.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *