HTML + CSSFiltros
Chips con píldora deslizante
Chips de filtro con una píldora de color que se desliza hasta la opción elegida y se ajusta a su ancho.
Ajustes
16px
1x
Código
<div class="uv-fcs"><button class="on">Todo</button><button>Diseño</button><button>Código</button><button>Fotos</button><button>Vídeo</button><span class="p"></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
Estos chips encajan en un portfolio que mezcla trabajos: un estudio que enseña branding, webs, fotografía y vídeo en la misma página. Quien entra toca una categoría y la píldora se mueve hasta ella, así siempre sabe qué está viendo. Si buscabas chips de filtro animados en HTML y CSS, esta es la versión más sencilla.
Usa etiquetas cortas, de una o dos palabras, porque si la fila salta a dos líneas la píldora pierde el camino. Con cinco o seis categorías vas bien. Si tienes más, un desplegable le hará un favor a quien visita tu web.