Border Ripple
Bouton dont chaque clic, au doigt ou au clavier, envoie trois ondes de bordure qui s'élargissent et un point lumineux qui fait le tour du cadre.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est un vrai <button type="button"> de classe brr-box : bord de 2 px violet pâle, qui devient plus net au survol. Il contient trois <span class="brr-pulse"> (des cadres de 2 px invisibles au repos) et un <span class="brr-travel"> qui porte le point lumineux, puis votre texte.
À chaque click (souris, doigt, Entrée ou Espace), le script relance les trois cadres à 200 ms d'écart : chacun part collé au bouton, s'écarte jusqu'à 20 px en arrondissant ses coins et s'efface en 1 s. En même temps, la classe brr-clicking lance le point : un halo de 40 px dégradé en #a78bfa qui longe le haut, la droite, le bas puis la gauche en 1,2 s, découpé sur le bord du bouton. Cliquer de nouveau avant la fin annule les minuteries en cours et relance tout depuis le début.
Le script cherche chaque .fx-0773-root et le bouton qu'elle contient : chaque copie a ses ondes et ses minuteries, et coller le script deux fois n'ajoute pas un second écouteur. Les animations s'appellent brr-pulse et brr-travel, des noms qu'aucun autre effet de la bibliothèque n'utilise.
Accessibilité
- Vrai bouton : il reçoit le focus avec Tab, se déclenche avec Entrée ou Espace et s'annonce comme « bouton » suivi de son texte. Au
:focus-visible, un contour de 2 px s'affiche à 4 px du bord. (La version d'origine était une<div>impossible à atteindre au clavier.) - Décor muet : les ondes et le point sont des
<span>vides enaria-hidden="true"; le nom du bouton reste son seul texte. - Mouvement réduit : sous
prefers-reduced-motion: reduce, ni onde ni point qui voyage ; le clic allume le contour (bord clair, anneau de 4 px et lueur) pendant 1,2 s, sans transition, puis tout revient au repos. - Retour visuel seulement : l'onde ne dit rien aux lecteurs d'écran. Si le clic produit un résultat (commande envoyée, tâche cochée), annoncez-le avec du texte, par exemple dans une zone
aria-live="polite".
Compatibilité navigateur
CSS (animation de la propriété inset : Chrome 87, Firefox 66, Safari 14.1 ; :focus-visible : Chrome 86, Firefox 85, Safari 15.4) et 1,2 Ko de JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies dont la 2e cliquée seule, Tab puis Entrée, appui du doigt, 390 px sans débordement, mouvement réduit sans aucune animation après le clic, 0 erreur.
Safari 14.1 à 15.3 : tout fonctionne, avec l'anneau de focus du navigateur à la place du contour violet. Sans JavaScript, le bouton reste un bouton, sans onde.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0773-root">
<button type="button" class="brr-box">
<span class="brr-pulse" aria-hidden="true"></span>
<span class="brr-pulse" aria-hidden="true"></span>
<span class="brr-pulse" aria-hidden="true"></span>
<span class="brr-travel" aria-hidden="true"></span>
…
</button>
</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 |
|---|---|---|
Couleur des ondes (CSS — --brr-color) |
#6366f1 |
Couleur des trois cadres qui s'élargissent. |
Couleur du point (CSS — --brr-light) |
#a78bfa |
Halo qui fait le tour, contour de focus et lueur du mode mouvement réduit. |
Bord au repos et au survol (CSS — --brr-rest, --brr-hover) |
rgba(99, 102, 241, .3) et .5 |
Couleur du bord de 2 px ; --brr-hover sert aussi d'anneau en mouvement réduit. |
Portée des ondes (CSS — inset: -20px dans @keyframes brr-pulse) |
20 px | Distance atteinte par chaque onde. Laissez au moins autant d'espace libre autour du bouton. |
Décalage et nombre (JS — i * 200, HTML — .brr-pulse) |
3 ondes, 200 ms d'écart | Ajoutez ou retirez des <span class="brr-pulse"> ; le script les prend toutes. |
Taille (CSS — width / min-height de .brr-box) |
200 × 120 px au moins | Le point suit le bord à toutes les tailles, d'une ligne de liste à un bouton plein écran. |
FAQ
brr-box à votre <button>, les quatre <span> en premiers enfants, et entourez-le d'un .fx-0773-root, une racine par bouton : le script ne branche que le premier bouton de chaque racine. Gardez-le pour des actions qui restent sur la page : sur un lien qui change de page, l'onde n'aurait pas le temps d'être vue.overflow: hidden ou si le bouton touche le bord de son conteneur, la partie qui dépasse est coupée. Prévoyez une marge de 20 px, ou réduisez la portée dans @keyframes brr-pulse.
