Elastic Toggle
Interrupteur élastique en CSS seul : la pastille blanche glisse de 24 px avec un léger dépassement et le rail passe au vert, sur un vrai interrupteur accessible.
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
Chaque ligne est un <label class="etg-row"> qui contient la vraie case <input type="checkbox" role="switch">, le rail dessiné .etg-track (52 × 28 px, pastille .etg-knob de 24 px) et le texte. La vraie case est transparente et posée sous le rail, à sa taille : elle reçoit le clic, le doigt, le focus et l'état, et un clic sur le texte bascule aussi puisque tout est dans le label.
Coché, le sélecteur input:checked + .etg-track passe le rail de rgba(255,255,255,.2) au vert #10b981 (0,3 s) et pousse la pastille de 24 px avec transform: translateX(24px). La courbe cubic-bezier(.68,-.55,.265,1.55) sort des bornes 0-1 : la pastille dépasse légèrement sa position d'arrivée puis revient, au départ comme au retour. C'est ce rebond qui donne l'effet élastique.
Aucun JavaScript et aucun :has() : la couleur du rail suit l'état par le seul sélecteur d'adjacence. Les classes sont préfixées etg- ; la racine .fx-0295-root (fond sombre, 300 px) n'est qu'un cadre de présentation à retirer dans une vraie page.
Accessibilité
- Rôle d'interrupteur :
role="switch"sur la case fait annoncer « Notifications, interrupteur, activé / désactivé » au lieu de « case à cocher ». - Nom accessible : le texte « Notifications » est dans le même label que la case, c'est donc son nom ; sans texte visible, ajoutez
aria-labelsur l'input. - Clavier : Tab atteint l'interrupteur, Espace le bascule ; un anneau
#a5b4fcentoure le rail au focus clavier (:focus-visible). - Mouvement réduit : sous
prefers-reduced-motion: reduce, la pastille et le rail changent sans glissement ni rebond. - Couleur : la position de la pastille (gauche / droite) dit l'état sans dépendre du vert.
Compatibilité navigateur
CSS seul (:checked, sélecteur d'adjacence, transform, cubic-bezier hors bornes). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies indépendantes, Tab puis Espace, toucher à 390 px, mouvement réduit, nom accessible lu comme interrupteur. L'anneau de focus demande :focus-visible (Chrome 86, Firefox 85, Safari 15.4).
Navigateurs plus anciens : l'interrupteur bascule et glisse, seul l'anneau de focus clavier manque.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0295-root">
<label class="etg-row">
<input type="checkbox" role="switch" name="notifications">
<span class="etg-track" aria-hidden="true"><span class="etg-knob"></span></span>
<span class="etg-text">Notifications</span>
</label>
</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 activée (CSS — input:checked + .etg-track) |
#10b981 | Le fond du rail coché ; l'anneau de focus reste #a5b4fc. |
Couleur au repos (CSS — background de .etg-track) |
rgba(255,255,255,.2) | Sur fond clair, passez à un gris plein (#d6d6dc) pour que le rail reste visible. |
Rebond (CSS — transition de .etg-knob) |
.3s cubic-bezier(.68,-.55,.265,1.55) | ease supprime le dépassement ; -.8 / 1.8 l'accentue. |
Taille (CSS — .etg-track, .etg-knob, input) |
52 × 28 px, pastille 24 px, course 24 px | Gardez course = largeur du rail − pastille − 4 px, et donnez à l'input la taille du rail. |
Cadre de démo (CSS — .fx-0295-root) |
min-height 300px, fond #0a0a0f | À retirer pour poser l'interrupteur dans une page ; le texte suit alors la couleur de la page. |
Nom envoyé (HTML — name, value) |
notifications = on | Dans un formulaire, seule une case activée est envoyée ; ajoutez une value parlante. |
FAQ
flex-direction: row-reverse sur .etg-row, plus justify-content: space-between pour l'écarter du texte. Replacez l'input invisible sous le rail (left: auto; right: 0).prefers-reduced-motion coupe la transition. L'interrupteur change d'état exactement pareil.
