Centre-fill filter chips
Chips that fill with colour from the middle outwards, with a little bounce when you select one.
Settings
Code
<div class="uv-fcf"><button class="on"><i></i><b>All</b></button><button><i></i><b>Design</b></button><button><i></i><b>Code</b></button><button><i></i><b>Photos</b></button><button><i></i><b>Video</b></button></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
Picture a recipe blog where readers switch between starters, mains, desserts and quick weeknight dinners. The colour blooming from the centre of the chip gives each tap a small, satisfying response, a bit like pressing a real button. It is a handy pick if you need category chips or a CSS filter button with some character.
The bounce is part of the charm, but on a page with lots of chips it can feel busy. Lower the speed a touch and pick one strong accent colour. With food photos around it, a warm tone usually sits better than a cold blue.