Créer un bouton avec une bulle de notification

Que ce soit dans un tableau de bord ou pour un système de notification, un bouton affichant le nombre d'événements en un seul coup d'œil est véritablement un must-have pour l'expérience vos utilisateurs. Voyons ensemble dans cet article comment en réaliser un facilement.

1ère étape

Commençons par le code HTML.

<a href="#">
  Messages
  <span>3</span>
</a>

Nous ajoutons juste un lien à notre page. La balise span sera notre bulle de notification.

2ème étape

Stylisons le lien et son survol par la souris.

a {
  position: relative;
  color: white;
  border: 2px solid #FF4754;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

a:hover {
  background-color: #FF4754;
}

3ème étape

Il ne nous reste plus qu'à styliser la bulle de notification.

a span {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: #FF4754;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #121212;
  border-radius: 50%;
}

Dans l’étape précédente, nous utilisons flexbox pour centrer horizontalement et verticalement le texte contenu dans notre bulle de notification.

Nous lui donnons une bordure de 4px de la couleur du fond de la page pour donner cette impression que la notification n’est pas collée directement sur la bordure de notre bouton.

Enfin, nous mettons notre bulle de notification en position: absolute pour la placer parfaitement dans le coin de notre bouton.