Animated Notification Badge

<button class="nb" id="nb"><svg viewBox="0 0 24 24" width="26" height="26"><path fill="none" stroke="#1a1f36" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0"/></svg><span class="nb-badge" id="badge">3</span></button>
<button class="nb-add" id="add">Add notification</button>

body{background:#f6f7fa;gap:24px;flex-direction:column}
.nb{position:relative;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #e2e6ef;cursor:pointer;display:grid;place-items:center}
.nb-badge{position:absolute;top:6px;right:6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ff477e;color:#fff;font:700 11px/20px system-ui,sans-serif;text-align:center;transform:scale(1);transition:transform .25s}
.nb-badge.pop{animation:pop .35s ease}
.nb-badge.zero{display:none}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
.nb-add{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#1a1f36;border:0;border-radius:10px;padding:11px 20px;cursor:pointer}

var n=3,badge=document.getElementById('badge');
document.getElementById('add').onclick=function(){n++;badge.textContent=n;badge.classList.remove('zero');badge.classList.remove('pop');void badge.offsetWidth;badge.classList.add('pop')};
document.getElementById('nb').onclick=function(){n=0;badge.textContent='0';badge.classList.add('zero')};