Aurora Gradient Button

Micro-interacciones que Enamoran

Un botón no debería ser solo un rectángulo que cambia de color. El Aurora Gradient Button utiliza una animación de posición de degradado para crear un efecto de flujo constante, similar a las luces del norte.

Características

• Degradado Dinámico: Tres colores que fluyen continuamente en el fondo.
• Efecto de Pulso: Un resplandor suave que rodea al botón.
• Interacción al Clic: Se encoge ligeramente al ser pulsado para dar feedback táctil.
• Accesible: Mantiene un alto contraste para la legibilidad del texto.

Código del Componente

<button class="aurora-button">
  Empezar Ahora
</button>

<style>
.aurora-button {
  padding: 1rem 2rem;
  font-weight: 800;
  color: white;
  border-radius: 1.2rem;
  background: linear-gradient(120deg, #6366f1, #a855f7, #6366f1);
  background-size: 200% auto;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
  cursor: pointer;
  animation: aurora-flow 4s linear infinite;
}

.aurora-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.6);
}

.aurora-button:active {
  transform: scale(0.95);
}

@keyframes aurora-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
</style>