Générateur de toggle switch (bouton marche/arrêt) CSS
Réglez la taille et les couleurs et testez l’aperçu. Le code utilise une vraie case à cocher : il fonctionne donc dans les formulaires et au clavier.
Mode d’emploiBouton marche/arrêt sans JavaScript
Disponible en: 
Générateur de toggle switch (bouton marche/arrêt) CSS: à quoi ça sert
Le bouton marche/arrêt s’utilise dans les préférences, les formulaires d’inscription et les paramètres. Ce générateur crée l’interrupteur avec une vraie case à cocher stylée en CSS, sans JavaScript : il conserve l’état, fonctionne au clavier et au toucher, est transmis avec le formulaire et est annoncé comme activé ou désactivé par le lecteur d’écran grâce à role=switch.
Vous réglez la largeur, la hauteur, les coins et les couleurs, et testez le résultat activé, désactivé et inactif. Le code inclut le focus visible, la transition douce qui respecte les personnes préférant moins de mouvement et le mode contraste élevé.
Mode d’emploi
- Réglez la taille et les coins.
- Choisissez les couleurs et le texte de l’étiquette.
- Copiez le HTML et le CSS.
Quand l’utiliser
- Préférences de notification.
- Mode sombre du site.
- Acceptation des conditions dans un formulaire.
Questions fréquentes
Faut-il du JavaScript ?
Pas pour que cela fonctionne. Seulement si vous voulez agir au moment où le bouton change, par exemple pour enregistrer la préférence : il suffit alors d’écouter l’événement change de l’input.
Quelle taille utiliser sur mobile ?
La zone tactile doit mesurer au moins 24 par 24 px selon les WCAG 2.2, et la valeur recommandée pour le doigt est d’environ 44 px. Comme le texte à côté fait aussi partie du label, il agrandit la zone cliquable.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.