HTML + CSSFiltros
Pestañas con subrayado deslizante
Una línea fina se desliza bajo la pestaña activa y se estira un poco al pasar el ratón por otra.
Ajustes
16px
1x
Código
<div class="uv-ftu"><button class="on">Todo</button><button>Diseño</button><button>Código</button><button>Fotos</button><span class="l"></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
La opción discreta para webs de contenido. Una revista online que cambia entre Lo último, Cultura, Viajes y Gastronomía, o una receta que separa ingredientes y elaboración. El subrayado sigue al cursor y se queda en la pestaña activa, con un aire ordenado que no roba protagonismo. Buena base si necesitas pestañas animadas en CSS.
Todo depende de una línea fina, así que cuida el contraste con el fondo. Combínalo con un fundido simple en el contenido de abajo; una animación de panel muy aparatosa chocaría con la calma de las pestañas.