Notification Bell Echo
A notification bell swings on hover while its unread-count badge expands.
A notification bell swings on hover while its unread-count badge expands.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<div class="tbx-1251"><button class="notice" type="button" aria-label="Three notifications"><span class="bell" aria-hidden="true"><svg viewBox="0 0 80 80" width="74" height="74"><path d="M23 52C29 46 27 35 28 29c1-9 6-15 12-15s11 6 12 15c1 6-1 17 5 23l4 5H19z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M33 64q7 11 14 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg></span><span class="badge">3</span><span class="msg">New updates</span></button></div>CSS
.tbx-1251{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1251 *, .tbx-1251 *::before,.tbx-1251 *::after{box-sizing:border-box}
.tbx-1251{background:#e9e9f2}.tbx-1251 .notice{position:relative;display:flex;align-items:center;gap:4px;width:240px;max-width:100%;height:118px;justify-content:center;border:0;background:#fff;cursor:pointer;border-radius:17px;box-shadow:0 10px 26px #58508a18;color:#514982}.tbx-1251 .bell{display:inline-block;transform-origin:50% 15%;transition:transform .3s}.tbx-1251 .badge{position:absolute;left:calc(50% + 24px);top:24px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#db6071;color:#fff;font-size:11px;font-weight:800;transition:transform .34s,box-shadow .34s}.tbx-1251 .msg{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}.tbx-1251 .notice:is(:hover,:focus-visible) .bell{animation:tb1251ring .68s ease-in-out 1}.tbx-1251 .notice:is(:hover,:focus-visible) .badge{transform:scale(1.26);box-shadow:0 0 0 7px #db607120}.tbx-1251 .notice:is(:hover,:focus-visible) .msg{opacity:1;transform:translateY(0)}@keyframes tb1251ring{0%,100%{transform:rotate(0)}20%{transform:rotate(17deg)}45%{transform:rotate(-13deg)}70%{transform:rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.tbx-1251 *, .tbx-1251 *::before, .tbx-1251 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for notification sections and data dashboards.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.