Ripple Click
Un bouton Material Design : au clic, une onde circulaire part exactement du point de contact, s'élargit et disparaît en fondu. Trois variantes visuelles (violet, contour, sombre), JavaScript minimal.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0364-root (250 px de haut, fond rgb(26, 26, 36)) centre trois boutons .mi-ripple-btn dans .mi-ripple-scene. Chaque bouton porte l'attribut data-ripple qui signale au script qu'il doit recevoir l'effet. Les boutons ont position: relative; overflow: hidden : c'est ce overflow: hidden qui contient l'onde dans la zone du bouton.
Au clic, le script calcule la position du pointeur dans le bouton via getBoundingClientRect() et crée un span.mi-ripple absolument positionné. Sa taille est le double du plus grand côté du bouton (pour couvrir les coins), son centre correspond au point de clic, et il anime via @keyframes miRippleOut : scale de 0 à 1 en 0,6 s avec ease-out et opacité de 0,3 à 0 sur la même durée. À la fin de l'animation, le span est supprimé du DOM pour éviter l'accumulation.
Trois variantes CSS changent uniquement les couleurs : .mi-ripple-btn--purple (fond violet #6366f1, onde blanche), .mi-ripple-btn--outline (fond transparent, bordure violette, onde violette), .mi-ripple-btn--dark (fond sombre #1e1b4b, onde blanche). La structure HTML et l'animation sont identiques pour les trois. Le script détecte prefers-reduced-motion : si activé, aucun span n'est créé et l'onde ne se joue pas.
Accessibilité
- Clavier : chaque bouton est un vrai
<button>; Tab l'atteint, Espace ou Entrée le déclenche. Le contour de focus (:focus-visible) apparaît à la navigation au clavier. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le JavaScript ne crée aucun span d'onde et le CSS supprime l'animation de l'onde. Les boutons restent pleinement fonctionnels visuellement (couleurs, hover, focus) sans aucun élément animé. - Toucher : l'onde part du point de toucher sur un écran tactile (via l'événement
clickqui reporte les coordonnées du doigt). La zone de clic minimale de 44×44 px est respectée pour chaque variante.
Compatibilité navigateur
CSS (overflow: hidden, animations @keyframes) + 0,6 Ko de JavaScript (getBoundingClientRect, createElement, addEventListener, matchMedia), aucune dépendance. Vérifié dans Chromium 151 : onde au point de clic, suppression du span en fin d'animation, trois variantes, mouvement réduit sans onde, 0 erreur. Les captures d'aperçu montrent l'animation rejouée en boucle automatique par le code de scène : ce comportement n'est pas inclus dans le code vendu.
Sans JavaScript, les boutons sont cliquables et restent visuellement corrects (hover, focus) mais l'onde ne s'affiche pas. Sans CSS animations, le span créé par le JS reste visible jusqu'à sa suppression sans animation.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0364-root">
<div class="mi-ripple-scene">
<button class="mi-ripple-btn mi-ripple-btn--purple" data-ripple="">Libellé</button>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Variante de couleur (HTML — classe modificatrice sur .mi-ripple-btn) |
3 variantes : --purple, --outline, --dark |
Créez une nouvelle variante en CSS en surchargeant background, color, border et la couleur de .mi-ripple. Pas de modification JavaScript nécessaire. |
Durée et courbe de l'onde (CSS — durée et easing de @keyframes miRippleOut) |
0,6 s, ease-out | Réduisez à 0,3 s pour une onde vive et discrète ; montez à 1 s pour une onde lente et contemplative. ease-in donne un départ lent et une fin rapide. |
Opacité maximale de l'onde (CSS — valeur de départ de opacity dans @keyframes miRippleOut) |
0,3 | 0,15 est très discret ; 0,5 est plus visible. Sur la variante outline, l'onde violette à 0,3 est déjà très lisible sur fond clair. |
Activation sur n'importe quel élément (HTML — attribut data-ripple) |
Sur les trois boutons de la démo | Ajoutez data-ripple à n'importe quel élément focusable (<a>, <button>) dans la même racine. Assurez-vous que l'élément a position: relative; overflow: hidden. |
FAQ
overflow: hidden sur le bouton contient l'onde dans sa zone. C'est essentiel pour que l'effet reste propre ; ne supprimez pas cette propriété.click déclenché par un toucher transmet les coordonnées du point de contact. L'onde part bien du doigt, pas du centre. Testé dans Chromium (émulation tactile) ; comportement identique attendu sur appareils réels.
