Es un hermoso componente de botón que atrae la atención con una banda de luz (efecto brillante) que fluye al pasar el mouse y periódicamente. Ideal para CTA (Call To Action) donde se desea captar la atención del usuario.

Vista previa

Casos de uso y características

• Mejorar las tasas de conversión: el movimiento visual facilita captar la atención de los usuarios, lo que lo hace perfecto para llamadas a la acción (CTA) importantes, como botones de registro y compra.

• Pequeña animación: Da una impresión sofisticada con un efecto de brillo (reflejo de luz) periódico regular que no es demasiado llamativo.

• Microinteracciones: el botón se elevará ligeramente al pasar el mouse y se agregará una sombra para enfatizar que es un elemento en el que se puede hacer clic.

Puntos claves del diseño y UX (Design & UX)

• Contraste y visibilidad: el efecto se enfatiza al pasar bandas de luz brillantes sobre un fondo oscuro.

• Rendimiento: la animación que utiliza “transformación” y “opacidad” minimiza la carga de dibujo en el navegador y logra un movimiento suave.

• Accesibilidad: el anillo de enfoque (focus:ring) se ha configurado adecuadamente para que el estado se pueda comunicar visualmente incluso con operaciones de teclado.

Cómo personalizar (Guía de personalización)

• Cambiar color: Puede personalizar el color de la luz cambiando rgba(255, 255, 255, 0.2) al color de su marca (por ejemplo, rgba(59, 130, 246, 0.3)).

• Ajuste de velocidad de animación: Configurar 3s de animation: shimmer-effect 3s infinito; en 2s hará que se mueva más rápido, y configurar 5s hará que se mueva más lento.

• Implementación solo con Tailwind: Al agregar keyframes a tailwind.config.js, es posible completar la implementación solo con las clases de utilidad de Tailwind sin usar clases personalizadas.

Código de implementación (Implementación)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

Reaccionar (Configuración de viento de cola)

Este es un enfoque que se puede completar dentro de un componente de React extendiendo el archivo de configuración de Tailwind (tailwind.config.js).