Hvordan man opretter: notifikationsknap

Lær at oprette en notifikationsknap ved hjælp af CSS.

Inbox 3

Hvordan man opretter en notifikationsknap

trin 1 - Tilføj HTML:

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

trin 2 - Tilføj CSS:

.notification {
  baggrund-farve: #555;
  color: white;
  text-decoration: none;
  margning: 15px 26px;
  position: relativ;
  display: inline-block;
  border-radius: 2px;
{}
.notification:hover {
  baggrund: rød;
{}
.notification .badge {
  position: absolut;
  øverst: -10px;
  højre: -10px;
  margning: 5px 10px;
  border-radius: 50%;
  baggrund: rød;
  color: white;
{}

Try it yourself

Related pages

Tutorial:CSS button