.cfb-badge {
position: relative;
width: 52px; height: 52px;
border: 0; border-radius: 50%;
background: linear-gradient(135deg, #06b6d4, #0ea5e9);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px rgba(6,182,212,0.35);
transition: transform 0.25s, box-shadow 0.25s;
}
.cfb-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6,182,212,0.5); }
.cfb-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfb-badge-dot {
position: absolute; top: -4px; right: -4px;
min-width: 22px; height: 22px;
padding: 0 6px; border-radius: 999px;
background: #ff5d6c;
color: #fff;
font: 700 11px/22px 'JetBrains Mono', monospace;
text-align: center;
border: 2px solid #111118;
box-shadow: 0 0 0 0 rgba(255,93,108,0.7);
animation: cfb-badge-ping 1.6s ease-out infinite;
}
@keyframes cfb-badge-ping {
0%,100% { box-shadow: 0 0 0 0 rgba(255,93,108,0.6); }
50% { box-shadow: 0 0 0 8px rgba(255,93,108,0); }
} <button type="button" class="cfb-badge" aria-label="Inbox, 3 unread">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M22 2 11 13" />
<path d="m22 2-7 20-4-9-9-4 20-7z" />
</svg>
<span class="cfb-badge-dot" aria-hidden="true">3</span>
</button> Live preview Edit any tab — preview updates live Ready