Radio neón

La opción activa brilla con un anillo de neón y su etiqueta toma el mismo color.

Ajustes

Color principal#0071e3

Color secundario#8ec5ff

Tamaño16px

Velocidad1x

Código

index.html

<div class="uv-rdn"><label><input type="radio" name="rdn" checked><span class="rb"><i></i></span>Bajo</label><label><input type="radio" name="rdn"><span class="rb"><i></i></span>Medio</label><label><input type="radio" name="rdn"><span class="rb"><i></i></span>Alto</label></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Radio buttons

Radio con punto que rebota

Radio buttonsHTML + CSS

Radio con anillo dibujado

Radio buttonsHTML + CSS

Selector con píldora deslizante

Radio buttonsHTML + CSS

Tarjetas radio con icono

Radio buttonsHTML + CSS

Radio con punto saltarín

Radio buttonsHTML + CSS

Radio con relleno líquido

Radio buttonsHTML + CSS

Pestañas verticales con luz

Radio buttonsHTML + CSS

Selector de planes

Radio buttonsHTML + CSS

Dónde usarlo

Los radios luminosos van en pantallas oscuras donde el ajuste tiene su punto de energía: la dificultad de un juego de navegador, la intensidad de una app de bombillas inteligentes o el nivel de picante en una web de comida a domicilio. La opción encendida se ve al momento. Radio buttons neón en CSS que también colorean la etiqueta.

Combina bien con el checkbox neón de la misma colección si necesitas los dos en un panel. Eso sí, deja el brillo solo para lo activo: si todo brilla, nada destaca.