HTML + CSSFiltros
Chips rellenos desde el centro
Chips que se llenan de color desde el centro hacia fuera, con un pequeño rebote al elegir uno.
Ajustes
16px
1x
Código
<div class="uv-fcf"><button class="on"><i></i><b>Todo</b></button><button><i></i><b>Diseño</b></button><button><i></i><b>Código</b></button><button><i></i><b>Fotos</b></button><button><i></i><b>Vídeo</b></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 Filtros
Dónde usarlo
Piensa en un blog de recetas donde el lector salta entre entrantes, principales, postres y cenas rápidas. El color que nace en el centro del chip hace que cada toque tenga respuesta, casi como apretar un botón de verdad. Te sirve si buscas chips de categoría o un botón de filtro en CSS con algo de carácter.
El rebote es parte de la gracia, pero en una página llena de chips puede cansar. Baja un poco la velocidad y quédate con un solo color de acento. Junto a fotos de comida, un tono cálido suele quedar mejor que un azul frío.