About this snippet

Alert users to new activity with this notification badge. We position a small red dot over a bell icon using absolute positioning, yet it scales perfectly if the number of notifications increases.

Size
908 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
385
<button class="notif-btn" aria-label="Notifications">
  <span class="icon">&#128276;</span>
  <span class="badge">3</span>
</button>
.notif-btn {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.notif-btn:hover {
  background: #f9fafb;
}
.icon {
  font-size: 1.5rem;
}
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  padding: 0 4px;
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save