Animaciones para tus botones con CSS

Los botones son una parte fundamental de cualquier sitio web, ya que guían a los usuarios a realizar acciones clave. Una forma efectiva de hacer que tus botones sean más atractivos y captar la atención de los usuarios es mediante animaciones con CSS. En este artículo, aprenderás a aplicar tres animaciones simples pero llamativas: Shake, Bounce y Pulse. Además, te proporcionaremos el código necesario para que puedas implementarlas fácilmente en tu proyecto.

Animación «Shake»

La animación Shake (sacudida) es ideal para atraer la atención del usuario hacia un botón específico. Este efecto hace que el botón se sacuda ligeramente, dando la sensación de movimiento.

Botón Shake

Código CSS:

/* Aplicar la animación a la clase .shake */
.shake {
    animation: shake 4s infinite; /* Repetir cada 4 segundos y ser infinita*/
}
/* Definir la animación Shake */
@keyframes shake {
    0% { transform: rotate(0); }
    2% { transform: translateY(-2px) rotate(-2deg); transform-origin: center;}
    4% { transform: translateY(2px) rotate(2deg); transform-origin: center;}
    6% { transform: translateY(-2px) rotate(-2deg); transform-origin: center;}
    8% { transform: translateY(2px) rotate(2deg); transform-origin: center;}
    10% { transform: translateY(-2px) rotate(-2deg); transform-origin: center;}
    12% { transform: rotate(0); transform-origin: center;}
}

Esta clase «shake» puedes agregarla a un botón o a un contenedor:

<button class="btn shake">Botón Shake</button>

Animación «Bounce»

La animación Bounce (rebote) hace que el botón suba y baje ligeramente, simulando un rebote. Es perfecta para destacar un botón de llamada a la acción.

Botón Bounce

Código CSS:

/* Aplicar la animación a la clase .bounce */
.bounce {
    animation: bounce 4s infinite; /* Repetir cada 4 segundos y ser infinita */
}

/* Definir la animación Bounce */
@keyframes bounce {
    0%  { transform: translateY(0); }
    5% { transform: translateY(-8px); }
    10%  { transform: translateY(0); }
    15% { transform: translateY(-8px); }
    20%  { transform: translateY(0); }
}

Agrega la clase «bounce » a un botón o a un contenedor:

<button class="btn bounce">Botón Bounce</button>

Animación «Pulse»

La animación Pulse (pulso) hace que el botón se expanda y contraiga ligeramente, creando un efecto de pulsación. Este efecto es excelente para captar la atención de los usuarios.

Botón Bounce

Código CSS:

/* Aplicar la animación a la clase .pulse */
.pulse {
    animation: pulse 4s infinite; /* Repetir cada 4 segundos y ser infinita */
}

/* Definir la animación Pulse */
@keyframes pulse {
    0% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
}