Un switch pour remplacer les boutons radios

Un switch pour remplacer les boutons radios

Pour ces 5 min de css, voici un switch réalisé avec des boutons radios. Le switch est beaucoup plus parlant pour l’utilisateur dans certains cas que les simples boutons radios, notamment sur mobile.

Bouton switch

Pour créer le switch, on superpose deux inputs de même taille, puis on customize l’élément qui servira de switch avec la translation par-dessus.
On modifie les z-index des inputs de sorte que seule l’élément unchecked soit cliquable.

On place ensuite les labels de chaque côté afin que l’utilisateur puisse également interagir avec.

Avec cette base il est alors facile d’adapter le css en fonction du design. De plus cette solution à le mérite de n’utiliser aucun javascript.