HTML + CSSRadio buttons

Pestañas verticales con luz

Una barra luminosa sube y baja por un carril fino hasta quedarse junto a la opción activa.

Ajustes

Color principal#0071e3

Color secundario#8ec5ff

Tamaño16px

Velocidad1x

Código

index.html

<div class="uv-rdv"><span class="ln"><i></i></span><button>Resumen</button><button class="on">Actividad</button><button>Ajustes</button><button>Ayuda</button></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

Selector de planes

Radio buttonsHTML + CSS

Valoración con estrellas y texto

Radio buttonsHTML + CSS

Dónde usarlo

Funciona más como menú lateral que como campo de formulario: las secciones de la página de tu cuenta, la barra lateral de un panel con resumen, actividad y ajustes, o los capítulos de una documentación. La barra de luz se desliza hasta el elemento activo y siempre sabes dónde estás. Pestañas verticales en HTML y CSS, con algo de JavaScript.

Queda mejor con entre cuatro y siete elementos de largo parecido. En temas oscuros el brillo luce mucho; en claros quizá te convenga suavizarlo para que la barra no se vea borrosa.