Easiest CSS for "red notification badge" with count

html

responsive-design

css-transitions

accessibility

byAlex Kataev·Nov 23, 2024

Create a red notification badge displaying a count using crisp, lightweight CSS. Here's a digestible example to drop directly into your project:

HTML:

<button class="icon-button">
  Notifications
  <span class="badge">1</span>
</button>

CSS:

.icon-button {
  position: relative;
  /* Style your button to be more than just a "push here" thing */
}

.badge {
  background: red;
  color: white;
  border-radius: 50%;
  padding: 0.25em 0.4em;
  font-size: 0.75em;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  min-width: 1em;
  height: 1em;
  text-align: center;
  line-height: 1em;
}

This creates a bold, centered count nestled in a red badge, signalling new notifications with great efficiency.

Handy badge customizations

Building a responsive badge

To ensure the badge is responsive and adapts on various screen sizes, use font-relative sizing (em units), a neat trick to maintain proportions on different devices.

Aligning content dynamically

For dynamically changing badge content, use Flexbox. It ensures size shifts, when the number changes from one, two or three digits, without breaking the design.

CSS Flexbox for .badge:

display: flex;
justify-content: center;
align-items: center;

Updating content interactively

Give your badge a responsive vibe using JavaScript to update the notification count on user's actions in real-time.

JavaScript for badge updates:

const badge = document.querySelector('.badge');
// Function to update badge count, because numbers are friends, not food!
function updateBadgeCount(newCount) {
  badge.textContent = newCount;
}

Adding smooth animations

Add CSS transitions for attention-grabbing badge animations. Make them subtle, not a rave party in your website's corner.

CSS transitions for .badge:

transition: transform 0.3s ease-in-out;
&:not(.empty) {
  transform: scale(1.1) translate(50%, -50%);
}

Badge presentation and accessibility

Visual enhancement with SVG

Level up from plain colors to SVG for sharper, scalable vectors, essentially making your badge look as sharp as a samurai's sword.

Attention to accessibility

Ensure all users can enjoy your design by providing screen reader compatibility.

HTML with accessibility attributes:

<span class="badge" role="status" aria-live="polite">1</span>

Cross-browser consistency

Cross-check rendering across browsers, because we're against browser discrimination.

Live demonstration

To make it relatable, a live demo is worth a thousand words. Get a taste of real-time behavior and font size adaptation.

View a live demo here.

Testing and troubleshooting

Always test your badge, because not all heroes carry a badge but all badges need testing:

Check badge behavior for single, double, and triple-digit counts.
Verify appearance on different device screen sizes.
Check visibility for colorblind users or those with visual impairments.

Extend support for troubleshooting, showing you not just create, but also care.

explain-codes / Html / Easiest CSS for "red notification badge" with count

Linked

Add centered text to the middle of a horizontal rule



Make container shrink-to-fit child elements as they wrap



Fill the remaining height or width in a flex container



Align an element to bottom with flexbox



Force flex item to span full row width



Two inline-block elements, each 50% wide, do not fit side by side in a single row



Arrange 2 items per row using flexbox



Handy badge customizations Badge presentation and accessibility Live demonstration Testing and troubleshooting