HTML + CSSFiltros

Pestañas con luz de neón

Una barrita de luz se coloca bajo la pestaña elegida y se desplaza, con su halo, cuando cambias.

Ajustes

16px
1x

Código

<div class="uv-ftg"><button>Inicio</button><button class="on">Explorar</button><button>Guardados</button><button>Perfil</button><span class="g"></span></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 Filtros

Dónde usarlo

Hecho para interfaces oscuras. La navegación superior de una app de música en streaming, con Inicio, Explorar, Guardados y Perfil, o el menú de una comunidad de videojuegos. El brillo le da a la pestaña activa un aire de neón, como iluminada desde abajo. Si buscabas pestañas con efecto glow en CSS, empieza por aquí.

Sobre fondo blanco el halo se pierde, así que resérvalo para temas oscuros. Con un solo color de acento vivo basta: cian, lima o rosa fuerte funcionan bien. Deja espacio bajo las pestañas para que la luz se extienda.