Neu Toggle
Deux interrupteurs taillés dans la matière : une piste creusée de 64 × 34 px et un grand modèle de 80 × 40 px à icône, dont le bouton en relief glisse de 40 px avec un rebond de 3,7 px de chaque côté et vire au violet ou à l'orange. Vrais boutons role="switch", utilisables au clavier.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque interrupteur est un <button type="button" role="switch" aria-checked> placé dans un <label class="neu-toggle-wrap"> avec son libellé : cliquer le texte bascule aussi l'interrupteur, et un lecteur d'écran annonce « Wi-Fi, interrupteur, activé ». La piste .neu-toggle (64 × 34 px, border-radius: 17px) est creusée par deux ombres internes #b8bec7 4px 4px 8px inset et #fff -4px -4px 8px inset ; le bouton .neu-toggle-knob (26 px, rond) est en relief par deux ombres portées de 3 px / 6 px. Activé (classe .active), il passe de left: 4px à left: 34px et se remplit du dégradé #8b5cf6 → #a78bfa. Le grand modèle .neu-toggle-big (80 × 40 px, bouton de 32 px avec icône SVG) va de 4 à 44 px et vire à l'orange #f59e0b → #f97316, icône en blanc.
Le rebond vient de la courbe cubic-bezier(.68, -.55, .27, 1.55) sur 0,3 s : ses deux valeurs hors de 0–1 font reculer le bouton avant de partir puis dépasser sa cible. Mesuré dans Chromium sur le grand modèle : le bouton descend à 0,3 px (3,7 px en arrière), monte à 47,7 px (3,7 px au-delà de 44) et se pose à 44 px — le même aller-retour à l'extinction. Le JavaScript tient en six lignes : un écouteur par interrupteur bascule .active et aria-checked. Il agit sur tous les .neu-toggle et .neu-toggle-big de la page, sans identifiant : autant d'interrupteurs que voulu.
Le code ne contient que l'effet : aucune règle ni variable du site (pas de --primary), aucun script d'un autre effet, rien qui puisse entrer en collision avec votre feuille de style. Chaque interrupteur est un vrai <button type="button" role="switch"> enveloppé par son <label> : Tab l'atteint, Espace et Entrée le basculent, un clic sur le libellé aussi, et le script tient en une boucle qui met à jour aria-checked. Comme toute la famille, la surface est déclarée par .neu-toggle-scene (background: #e0e5ec, padding: 28px, border-radius: 24px) : le relief ne dépend pas du fond de votre page.
Accessibilité
- Clavier et lecteurs d'écran : mesuré dans Chromium et Firefox, Tab atteint les deux interrupteurs, Espace et Entrée les basculent,
aria-checkedsuit (« true » / « false »). Le nom accessible vient dulabelenglobant (« Wi-Fi », « Mode sombre »). Le focus est marqué paroutline: 2px solid #8b5cf6à 3 px du bord (3,3:1 sur la matière, au-dessus des 3:1 demandés). - Contraste : les libellés
#6b7280sur#e0e5ecmesurent 3,8:1 pour 13,6 px en graisse 600, sous le seuil de 4,5:1 — passez-les en#374151(8,1:1), comme dans les scènes. La piste n'existe que par ses ombres internes (#b8bec7, 1,5:1) : éteint, l'interrupteur est une forme très pâle. Allumé, le bouton violet (dégradé#8b5cf6→#a78bfa) contraste de 3,3:1 à 2,2:1 selon le point du dégradé ; l'orange#f59e0bdu grand modèle seulement à 1,7:1 sur la matière — l'état reste lisible par la position du bouton, pas par sa couleur. - Position plutôt que couleur : l'état se lit d'abord par le côté où se trouve le bouton (gauche éteint, droite allumé), ce qui ne dépend pas de la vision des couleurs. Pour un réglage important, ajoutez un texte d'état (« 2 circuits allumés »).
- prefers-reduced-motion absent du code : le rebond (recul et dépassement de 3,7 px) joue même quand le système demande moins d'animation. Il est bref et déclenché par l'utilisateur ; pour le supprimer :
@media (prefers-reduced-motion: reduce) { .neu-toggle-knob, .neu-toggle-big-knob { transition: none } }.
Compatibilité navigateur
CSS : box-shadow internes et portées, transition avec cubic-bezier hors de 0–1, linear-gradient, flexbox avec gap. JavaScript : querySelectorAll, classList.toggle, setAttribute, sans dépendance. Mesuré dans Chromium, Firefox et WebKit (Playwright) : bascule à la souris, au clavier et par clic sur le libellé, rebond identique. Le gap des conteneurs flex demande Chrome 84, Firefox 63, Safari 14.1.
Sans JavaScript, les interrupteurs s'affichent dans leur état initial et ne basculent pas : gardez l'état réel côté serveur ou doublez-les d'une case à cocher si l'action est critique. Avant le gap des conteneurs flex, le libellé touche l'interrupteur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="neu-toggle-scene">
<label class="neu-toggle-wrap">
<span class="neu-toggle-label">Wi-Fi</span>
<button type="button" class="neu-toggle active" role="switch" aria-checked="true">
<span class="neu-toggle-knob"></span>
</button>
</label>
<label class="neu-toggle-wrap">
<span class="neu-toggle-label">Mode sombre</span>
<button type="button" class="neu-toggle-big" role="switch" aria-checked="false">
<span class="neu-toggle-big-knob"><svg viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
</button>
</label>
</div>Le code complet HTML + CSS + JS de Neu Toggle, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Rebond (CSS — transition: .3s cubic-bezier(.68, -.55, .27, 1.55)) |
0,3 s, recul et dépassement de 3,7 px | cubic-bezier(.34, 1.56, .64, 1) garde le dépassement à l'arrivée sans le recul au départ. ease supprime le rebond. Au-delà de 0,4 s, l'interrupteur paraît mou. |
Couleur allumée (CSS — .neu-toggle.active .neu-toggle-knob, .neu-toggle-big.active .neu-toggle-big-knob) |
violet #8b5cf6 → #a78bfa ; orange #f59e0b → #f97316 | Changez le dégradé et l'ombre colorée rgba(…, .4) 0 2px 8px ensemble. Vert « en marche » : #16a34a → #22c55e. |
Icône du grand modèle (HTML — <svg> dans .neu-toggle-big-knob) |
lune (Mode sombre) | N'importe quel SVG 24 × 24 en trait, affiché à 16 px : stroke gris éteint, blanc allumé. Gardez aria-hidden="true" : le nom vient du libellé. |
État initial (HTML — classe active + aria-checked) |
Wi-Fi allumé, Mode sombre éteint | Posez les deux ensemble : class="neu-toggle active" aria-checked="true". Pour réagir au changement, écoutez click sur le bouton et lisez aria-checked. |
Teinte de la matière (CSS — #e0e5ec, ombres #b8bec7 / #fff) |
gris bleuté clair | Piste, bouton éteint et surface .neu-toggle-scene doivent partager la même teinte ; changez les trois avec une paire d'ombres de la même famille. |
FAQ
<button role="switch"> s'annonce comme un interrupteur (« activé / désactivé ») et se bascule à Espace comme à Entrée. Dans un formulaire envoyé au serveur, une <input type="checkbox" role="switch"> cachée visuellement sous la piste transmettrait la valeur toute seule ; ici, lisez aria-checked en JavaScript.btn.addEventListener('click', () => console.log(btn.getAttribute('aria-checked'))). Les écouteurs s'exécutent dans l'ordre d'ajout : le vôtre lit l'état déjà basculé.
