← All elements
<div class="tc"><a style="--c:#6366f1">design</a><a style="--c:#ec4899">motion</a><a style="--c:#10b981">layout</a><a style="--c:#f59e0b">colour</a><a style="--c:#0ea5e9">grid</a><a style="--c:#8b5cf6">forms</a></div>About this hover effect
Wrapping topic tags in soft colours with a small dot that fills with colour on hover.
How it works
Chips are flex items that wrap. Each has a hollow dot made from an inset shadow in the chip's custom colour, and on hover the chip fills with that colour and the dot becomes solid white.
Ways to customise it
- Edit the tag names and colours.
- Make chips links.
- Increase the gap for more breathing room.
Good to know
Make each chip a real link or button. Colour is supported by text, so meaning does not depend on colour only.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.