← All elements
<div class="xb"><a><i>⌂</i><span>Home</span></a><a><i>★</i><span>Saved</span></a><a><i>✉</i><span>Inbox</span></a></div>About this hover effect
A vertical toolbar of round icon buttons that each stretch into a labelled pill when hovered.
How it works
Each row is a round 48px pill with overflow hidden. Hovering widens it to 140px with a springy transition, which exposes the label that was clipped, while the label fades in after a short delay.
Ways to customise it
- Add more rows with other icons.
- Change 140px to fit longer labels.
- Switch the hover colour from #4f46e5.
Good to know
Icons alone are unclear, so the label should also be exposed to assistive technology via text in the markup, as it is here. Touch users see icons 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.