HTML + CSSInterrupteurs

Interrupteur néon

Un interrupteur en contour discret qui s'illumine d'un halo coloré autour du rail et du bouton une fois activé.

Réglages

16px
1x

Code

<label class="uv-tn"><input type="checkbox" checked><span></span></label>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Interrupteurs

Voir tout : Interrupteurs

Où l’utiliser

Ce toggle néon ressemble à une lumière qu'on allume, ce qui en fait un choix naturel pour un tableau de bord domotique (« Lumières du salon »), les réglages RVB de l'appli d'un clavier gaming ou le « Mode nuit » d'un lecteur de musique. Éteint, c'est un simple contour gris. Allumé, le rail et le bouton brillent à vos couleurs.

L'écart entre éteint et allumé est très net, impossible de se tromper sur l'état. Il lui faut un fond sombre pour briller ; sur du blanc, la lueur paraît fade. La couleur secondaire colore le halo autour du bouton.