Radio Ripple
Boutons radio en CSS seul : le point de l'option choisie surgit avec un rebond et une onde claire s'étend puis s'efface autour du cercle, sur de vrais radios natifs.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le groupe est un <fieldset class="rrp-group"> dont la <legend> donne le nom de la question (masquée à l'œil, lue par les lecteurs d'écran). Chaque option est un <label class="rrp-option"> qui contient le vrai <input type="radio">, le cercle dessiné .rrp-circle (22 px, bord 2 px #6366f1) et son texte. Le radio est transparent et posé sous le cercle : il garde le clic, le focus, les flèches du clavier et l'envoi du formulaire.
Deux pseudo-éléments font l'animation. ::before est le point central : à scale(0) au repos, il passe à scale(1) quand le radio est coché, en 0,3 s sur une courbe cubic-bezier(.68,-.55,.265,1.55) qui le fait dépasser puis revenir. ::after est un disque indigo à 20 % qui déborde de 8 px autour du cercle ; à la sélection, l'animation rrp-ripple (0,4 s) le fait grandir de 0 à 1,5 fois en s'effaçant : c'est l'onde.
Aucun JavaScript. Les radios d'un même groupe partagent un name (ici option) : c'est lui qui fait qu'un seul choix est possible, et c'est lui que reçoit votre serveur. L'option cochée dans le HTML (checked) joue aussi son onde au chargement.
Accessibilité
- Vrais radios : Tab entre dans le groupe sur l'option cochée, les flèches haut / bas changent le choix, un lecteur d'écran annonce « Choisissez une option, groupe, Option 1, bouton radio, coché, 1 sur 3 ».
- Nom du groupe : la légende du fieldset est lue avant la première option ; écrivez-y la vraie question (« Créneau de retrait »).
- Focus visible : au clavier, un anneau
#a5b4fcentoure le cercle de l'option active (input:focus-visible + .rrp-circle). - Mouvement réduit : sous
prefers-reduced-motion: reduce, le point apparaît sans rebond et l'onde n'est pas jouée. - Zone de clic : la ligne entière (cercle et texte) est cliquable.
Compatibilité navigateur
CSS seul : :checked, pseudo-éléments, @keyframes, inset (Chrome 87, Firefox 66, Safari 14.1). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : clic, Tab puis flèche bas, toucher à 390 px, mouvement réduit. L'anneau de focus demande :focus-visible (Chrome 86, Firefox 85, Safari 15.4).
Sans inset (navigateurs de 2020 et avant), le point et l'onde ne se dessinent pas mais les radios restent utilisables. Sans :focus-visible, pas d'anneau au clavier.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0296-root">
<fieldset class="rrp-group">
<legend class="rrp-legend">Choisissez une option</legend>
<div class="rrp-list">
<label class="rrp-option">
<input type="radio" name="option" value="1" checked>
<span class="rrp-circle" aria-hidden="true"></span>
<span>Option 1</span>
</label>
<!-- Option 2, Option 3 : même structure -->
</div>
</fieldset>
</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 (CSS — border-color de .rrp-circle, background de ::before et ::after) |
#6366f1, onde rgba(99,102,241,.2) | Changez les trois ensemble ; gardez l'onde très transparente (20 à 25 %). |
Rebond du point (CSS — transition de .rrp-circle::before) |
.3s cubic-bezier(.68,-.55,.265,1.55) | ease-out pour un point qui apparaît sans dépasser. |
Onde (CSS — @keyframes rrp-ripple et inset de ::after) |
0,4 s, de 0 à 1,5 fois, débord de 8 px | Passez inset à -14px et la durée à .6s pour une onde plus large et plus lente. |
Taille du cercle (CSS — .rrp-circle et l'input) |
22px | Donnez la même taille à l'input invisible pour garder la zone de clic sous le cercle. |
Nom du groupe (HTML — name et <legend>) |
option · « Choisissez une option » | Un name différent par question ; la légende peut rester visible en retirant la classe rrp-legend. |
Cadre de démo (CSS — .fx-0296-root) |
min-height 300px, fond #0a0a0f | À retirer dans un formulaire réel : le texte prend alors la couleur de la page. |
FAQ
name, donc le navigateur en fait un seul groupe : un seul radio peut être coché sur toute la page. Donnez un name différent à chaque question (« creneau », « livraison »…), c'est aussi ce qui distingue les réponses côté serveur.checked. Pensez alors à required sur un des radios si une réponse est obligatoire : le navigateur bloquera l'envoi..rrp-list en flex-direction: row avec un gap ; les flèches gauche / droite du clavier marchent aussi.
