Miten luoda: Kuvan päällä oleva painike

Opi, miten lisätä painiketta kuvan päälle CSS:n avulla.

Miten lisätä painiketta kuvan päälle

Ensimmäinen vaihe - Lisää HTML:

<div class="container">
  <img src="img_snow.jpg" alt="Snow">
  <button class="btn">Painike</button>
</div>

Toinen vaihe - Lisää CSS:

/* Tarvitaan konttia painikkeen sijoittamiseen. Määritä tarvittaessa leveys */
.container {
  sijainti: suhteellinen;
  leveys: 50%;
}
/* Tehdä kuvasta mukautuva vastauskykyinen asettelu */
.container img {
  leveys: 100%;
  korkeus: automaattinen;
}
/* Aseta painikkeen tyylit ja sijoita se konttiin/kuvan keskelle */
.container .btn {
  sijainti: absoluuttinen;
  ylä: 50%;
  vasen: 50%;
  tehtävä: siirrä(-50%, -50%);
  -ms-tehtävä: siirrä(-50%, -50%);
  taustaväri: #555;
  color: valkoinen;
  font-size: 16 px;
  työvaihe: 12 px 24 px;
  reunukulma: ei mitään;
  (cursor: pointer;)
  reunukulma: 5 px;
}
.container .btn:hover {
  background-color: black;
}

Kokeile itse