Hoe te maken: meldingsknop

Leer hoe je een meldingsknop kunt maken met CSS.

Inbox 3

Hoe een meldingsknop te maken

Eerste stap - Voeg HTML toe:

<a href="#" class="notification">
  <span>Inbox</span>
  <span class="badge">3</span>
</a>

Tweede stap - Voeg CSS toe:

.notification {
  achtergrondkleur: #555;
  color: white;
  tekstdecoratie: none;
  inschuif: 15px 26px;
  positie: relatief;
  weergave: inline-blok;
  hoekradius: 2px;

.notification:hover {
  achtergrond: rood;

.notification .badge {
  positie: absoluut;
  boven: -10px;
  rechts: -10px;
  inschuif: 5px 10px;
  hoekradius: 50%;
  achtergrond: rood;
  color: white;

Try it yourself

Related pages

Tutorial:CSS button