Back to CSS Floating Buttons Notification Badge Pure CSS
Share
.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