Kuinka luoda: ilmoituspainike

Kuinka luoda ilmoituspainike

vaihe 1 - Lisää HTML:

<a href="#" class="ilmoitus">
  <span postilaatikko</span>
  <span class="merkki">3</span>
</a>

vaihe 2 - Lisää CSS:

.ilmoitus {
  taustaväri: #555;
  color: white;
  tekstiväri: ei-alarivillinen;
  pohjalevy: 15px 26px;
  sijainti: suhteellinen;
  näytä: inline-block;
  reunaviiva-kulma: 2px;
}
.ilmoitus:hover {
  tausta: punainen;
}
.ilmoitus .merkki {
  sijainti: absoluuttinen;
  ylä: -10px;
  oikea: -10px;
  pohjalevy: 5px 10px;
  reunaviiva-kulma: 50%;
  tausta: punainen;
  color: white;
}

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS-painike