Ripple Effect

Exemples d'usage

Comment ça marche

Accessibilité

• Rien ne se passe au clavier dans Chromium et Firefox : Entrée ou Espace sur le <button> déclenche bien click, mais avec clientX = clientY = 0 (et detail = 0). L'onde naît alors au coin haut-gauche de la fenêtre — à −270 / −236 px du bouton de la démo — et reste hors du bouton, découpée : aucun retour. WebKit (Safari) passe le centre du bouton et l'onde fonctionne. Ajoutez en tête de fonction : if (e.detail === 0) { x = rect.width / 2; y = rect.height / 2 } et utilisez ces coordonnées à la place de e.clientX − rect.left.
• Contraste à la limite : texte blanc de 16 px sur #6366f1 = 4,47:1, sous le seuil AA de 4,5:1 de 0,03. #4f46e5 donne 6,3:1 sans changer l'onde. Pendant l'onde, le libellé passe sur #a1a3f7 au front de vague (blanc à 40 % sur l'indigo) : 2,3:1 pendant une fraction des 600 ms — un état transitoire que WCAG n'évalue pas, mais un libellé qui blanchit ; baissez l'opacité de l'onde à .25 si le texte est long.
• prefers-reduced-motion absent du code. Attention au réflexe animation: none : sans animation, animationend ne vient jamais et le span reste dans le DOM (mesuré : 1 span orphelin 800 ms après le clic, invisible à l'échelle 0, retiré au clic suivant). Préférez couper à la source : if (matchMedia('(prefers-reduced-motion: reduce)').matches) return; en première ligne de createRipple.
• Lecteurs d'écran : le span est vide, inséré dans le <button>, sans texte — le nom accessible ne change pas. Ajoutez circle.setAttribute('aria-hidden', 'true') par sécurité. pointer-events: none garantit que l'onde n'intercepte jamais le clic suivant.
• Focus et tactile : le code écrit border: none sans toucher à outline, l'anneau de focus natif reste (non rogné par overflow: hidden). Au toucher, le tap produit un click avec coordonnées : l'onde part sous le doigt — c'est le retour Material d'origine, et il fonctionne. Cible ≈ 50 px de haut, au-dessus du minimum de 44 px.

Compatibilité navigateur

Sans JavaScript, le bouton est un bouton indigo ordinaire, cliquable : l'attribut onclick est inerte, rien ne se passe au clic. Si JavaScript est actif mais que la fonction manque ou n'est pas globale, chaque clic lève ReferenceError: createRipple is not defined dans la console — le bouton garde son rôle (un submit soumet toujours). Sans animations CSS, le span est ajouté à scale(0), invisible, et reste jusqu'au clic suivant.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

<button class="demo-btn btn-ripple" onclick="createRipple(event)">Ripple Effect</button>

.demo-btn  {
   padding: 16px 32px;
   font-size: 1rem;
   font-weight: 600;
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: none;
   border-radius: 12px;
   cursor: pointer;
   font-family: inherit;
   position: relative;
   overflow: hidden;
   }

.btn-ripple  {
   background: rgb(99, 102, 241);
   color: white;
   transition: 0.3s;
   }

.btn-ripple .ripple-circle  {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.4);
   transform: scale(0);
   animation: 0.6s linear 0s 1 normal none running ripple;
   pointer-events: none;
   }

@keyframes ripple  {
   
  100%  {
   transform: scale(4);
   opacity: 0;
   }
}

// L'attribut onclick="createRipple(event)" du bouton exige une fonction GLOBALE.
function createRipple(e) {
  const btn = e.currentTarget;
  const rect = btn.getBoundingClientRect();
  // Au clavier (Entree/Espace), clientX/clientY valent 0 : l'onde naitrait
  // hors du bouton, invisible. On la centre dans ce cas.
  const auClavier = e.detail === 0;
  const px = auClavier ? rect.left + rect.width / 2 : e.clientX;
  const py = auClavier ? rect.top + rect.height / 2 : e.clientY;
  const circle = document.createElement('span');
  const diameter = Math.max(btn.clientWidth, btn.clientHeight);
  const radius = diameter / 2;
   circle.style.width = circle.style.height = `${diameter}px`;
  circle.style.left = `${px - rect.left - radius}px`;
  circle.style.top = `${py - rect.top - radius}px`;
  circle.classList.add('ripple-circle');
   const ripple = btn.querySelector('.ripple-circle');
  if (ripple) ripple.remove();
   circle.addEventListener('animationend', () => circle.remove());
  btn.appendChild(circle);
}

Personnaliser

Options passées à l'API ou attributs data-* :

FAQ

Effets liés — Boutons

🎊

Gradient ShiftGratuit

Magnetic Button✨ Premium

Border Draw✨ Premium

Shine Sweep✨ Premium

Voir tous les effets Boutons →