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.

Plus dans 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.