← All elements
<button class="nb" aria-label="Notifications"><span class="bell"></span><i>3</i></button>About this button
A bell drawn with borders and gradients that swings from its top on hover, with a pulsing unread badge.
How it works
The bell body, rim and clapper are three shapes made from border-radius and a pseudo-element, with transform-origin at the top. On hover a keyframe rotates it back and forth with decreasing amplitude to feel like a real swing, and a badge pulses with a growing box-shadow.
Ways to customise it
- Change the badge number and colour.
- Edit the rotate values in swing for a gentler motion.
- Colour the bell with #ca8a04.
Good to know
Include an aria-label with the unread count in a real app. Animations stop under reduced motion. The bell is pure CSS, so there is no icon font to load.
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.