Animación de botón con fondo arcoíris en CSS

Si alguna vez te has preguntado cómo crear un efecto visualmente impactante en un botón sin usar JavaScript, ¡estás en el lugar correcto! Hoy vamos a ver cómo hacer una animación de fondo de arcoíris en un botón usando únicamente CSS. Este efecto es perfecto para llamar la atención de los usuarios y darle un toque divertido y único a tu diseño web.

Código de HTML y CSS para el botón animado

Primero, vamos a ver el código completo para crear nuestro botón animado. Aquí tienes el código HTML y CSS:

<button class="animated-button">Botón</button>
.animated-button {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    background: linear-gradient(45deg, #ff0057, #e64a19, #fbc02d, #00bcd4, #8bc34a, #ff0057);
    background-size: 600%;
    border: none;
    cursor: pointer;
    transition: background-position 0.5s;
}

.animated-button:hover {
    animation: animateBackground 8s linear infinite;
}

@keyframes animateBackground {
    0% { background-position: 0% 50%; }
    100% { background-position: -600% 50%; }
}

Explicación paso a paso del código

Este código puede parecer extenso, pero cada línea tiene su función específica. Aquí te explico cómo funciona cada parte:

1. Estilizando el botón con .animated-button

Primero, definimos el estilo del botón utilizando la clase .animated-button. Estas son las propiedades clave:

  • position: relative;: Permite que el botón se posicione en relación con su contenedor.
  • display: inline-block;: Configura el botón para que ocupe sólo el espacio necesario y permite aplicar márgenes y paddings.
  • padding: 15px 30px;: Añade espacio alrededor del texto, mejorando la apariencia y la interacción.
  • font-size: 18px;: Define el tamaño de la fuente.
  • color: #fff;: Establece el color del texto en blanco para asegurar que contraste con el fondo colorido.
  • text-decoration: none;: Elimina cualquier subrayado o estilo adicional.
  • overflow: hidden;: Limita la animación al área del botón.
  • background: linear-gradient(...): Aquí es donde sucede la magia. Usamos un gradiente lineal en varios colores para crear el efecto de arcoíris.
  • background-size: 600%;: Este tamaño extendido permite que el fondo se mueva, creando la ilusión de desplazamiento del arcoíris.
  • border: none;: Eliminamos el borde por defecto del botón.
  • cursor: pointer;: Cambia el cursor a una mano al pasar sobre el botón, indicando que es clicable.
  • transition: background-position 0.5s;: Suaviza el cambio de posición del fondo al mover el ratón sobre el botón.

2. Animación de fondo en hover

Cuando el usuario pasa el cursor sobre el botón, queremos que el fondo comience a moverse. Para lograr esto, aplicamos la siguiente regla en el pseudo estado :hover:

.animated-button:hover {
    animation: animateBackground 8s linear infinite;
}

Al aplicar la animación animateBackground, hacemos que el fondo se desplace de manera continua. Aquí, la duración es de 8 segundos, lo que da un efecto suave y relajante.

3. La magia de @keyframes con animateBackground

Para definir cómo se moverá el fondo, usamos @keyframes. En esta animación, estamos moviendo el fondo horizontalmente de izquierda a derecha, utilizando las siguientes instrucciones:

@keyframes animateBackground {
    0% { background-position: 0% 50%; }
    100% { background-position: -600% 50%; }
}
  • 0% { background-position: 0% 50%; }: Define el punto inicial del gradiente en el extremo izquierdo.
  • 100% { background-position: -600% 50%; }: Al final de la animación, el fondo se mueve a -600% en el eje horizontal, creando el efecto de desplazamiento.

La combinación de estos valores produce un desplazamiento continuo, y como el gradiente es cíclico, da la impresión de que el arcoíris nunca termina.

Personalizando el botón

Si deseas ajustar el efecto a tu gusto, aquí tienes algunas ideas:

  • Cambiar los colores del gradiente: Puedes ajustar los colores dentro del linear-gradient() para darle otro estilo.
  • Modificar la duración de la animación: Ajusta los 8s a un valor mayor para un efecto más lento, o menor para algo más rápido.
  • Ajustar el background-size: Puedes experimentar con el tamaño del fondo para cambiar el ritmo del desplazamiento.

Compartir esta información

Mejora la conversión de tu tienda. Plugin para pagos contra-entrega. ¡Haz clic aquí!
Copyright 2025