SnippetUI
← Back to snippets

Bouton Shimmer

Un magnifique composant de bouton qui émet une bande de lumière (effet chatoyant) en survol et périodiquement.

HTMLCSSTailwind CSSReact

C’est un magnifique composant de bouton qui attire le regard avec une bande de lumière (effet chatoyant) qui coule au survol et périodiquement. Idéal pour les CTA (Call To Action) où vous souhaitez attirer l’attention de l’utilisateur.

Aperçu

Cas d’utilisation et fonctionnalités

  • Améliorez les taux de conversion : le mouvement visuel permet d’attirer facilement l’attention des utilisateurs, ce qui le rend parfait pour les appels à l’action (CTA) importants comme les boutons d’inscription et d’achat.

  • Petite animation : donne une impression sophistiquée avec un effet de miroitement périodique régulier (réflexion de la lumière) qui n’est pas trop flashy.

  • Microinteractions : Le bouton sera légèrement surélevé au survol et une ombre sera ajoutée pour souligner qu’il s’agit d’un élément cliquable.

Points clés du design et de l’UX (Design & UX)

  • Contraste et visibilité : L’effet est accentué par l’exécution de bandes de lumière vives sur un fond sombre.

  • Performance : l’animation qui utilise « transformation » et « opacité » minimise la charge de dessin sur le navigateur et permet un mouvement fluide.

  • Accessibilité : La bague de mise au point (focus:ring) a été définie de manière appropriée afin que l’état puisse être communiqué visuellement même avec les opérations du clavier.

Comment personnaliser (Guide de personnalisation)

  • Changer la couleur : Vous pouvez personnaliser la couleur de la lumière en changeant rgba(255, 255, 255, 0.2) par la couleur de votre marque (par exemple rgba(59, 130, 246, 0.3)).

  • Ajustement de la vitesse d’animation : régler « 3s » de « animation : shimmer-effect 3s infinite ; » sur « 2s » le fera se déplacer plus rapidement, et régler « 5s » le fera se déplacer plus lentement.

  • Implémentation uniquement avec Tailwind : en ajoutant des « images clés » à « tailwind.config.js », il est possible de terminer l’implémentation avec uniquement les classes utilitaires de Tailwind sans utiliser de classes personnalisées.

Code d’implémentation (Implémentation)

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>

Réagir (configuration Tailwind)

Il s’agit d’une approche qui peut être complétée au sein d’un composant React en étendant le fichier de configuration Tailwind (tailwind.config.js).