Boutons radio néon

L’option active brille d’un anneau néon et son libellé prend la même couleur.

Réglages

Couleur principale#0071e3

Couleur secondaire#8ec5ff

Taille16px

Vitesse1x

Code

index.html

<div class="uv-rdn"><label><input type="radio" name="rdn" checked><span class="rb"><i></i></span>Faible</label><label><input type="radio" name="rdn"><span class="rb"><i></i></span>Moyen</label><label><input type="radio" name="rdn"><span class="rb"><i></i></span>Élevé</label></div>

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 Boutons radio

Bouton radio à rebond

Boutons radioHTML + CSS

Radio à anneau dessiné

Boutons radioHTML + CSS

Sélecteur à pastille glissante

Boutons radioHTML + CSS

Cartes radio avec icône

Boutons radioHTML + CSS

Radio à point sauteur

Boutons radioHTML + CSS

Radio à remplissage liquide

Boutons radioHTML + CSS

Onglets verticaux lumineux

Boutons radioHTML + CSS

Sélecteur de formules

Boutons radioHTML + CSS

Où l’utiliser

Les radios lumineux vont sur les écrans sombres où le réglage a lui-même un peu d’énergie : le niveau de difficulté d’un jeu en ligne, la luminosité d’une application d’ampoules connectées ou le niveau d’épices d’un site de livraison. L’option allumée se repère tout de suite. Des boutons radio néon en CSS qui colorent aussi le libellé.

Ils s’accordent bien avec la case à cocher néon de la même collection si vous avez besoin des deux dans un panneau. Gardez la lueur pour l’état actif : si tout brille, plus rien ne ressort.