Sliding pill filter chips
Filter chips with a coloured pill that glides to the option you pick and resizes to fit the label.
Settings
Code
<div class="uv-fcs"><button class="on">All</button><button>Design</button><button>Code</button><button>Photos</button><button>Video</button><span class="p"></span></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
These chips suit a portfolio that mixes kinds of work: a studio showing branding, web, photography and video on the same page. Visitors tap a category and the pill slides over, so it is always clear what they are looking at. If you came looking for animated filter chips in HTML and CSS, this is the simple version.
Keep the labels short, one or two words each, or the row wraps and the pill loses its path. Five or six categories is about the limit. Past that, a dropdown will serve people better than a long line of chips.