Hur man skapar: Knapp på bilden

Lär dig hur du använder CSS för att lägga till en knapp på en bild.

Hur man lägger till en knapp på en bild

Steg 1 - Lägg till HTML:

<div class="container">
  <img src="img_snow.jpg" alt="Snö">
  <button class="btn">Knapp</button>
</div>

Steg 2 - Lägg till CSS:

/* Behöver behållare för att placera knappen. Justera bredden efter behov */
.container {
  position: relativ;
  bredd: 50%;
}
/* Gör bilden anpassningsbar för responsiv layout */
.container img {
  bredd: 100%;
  höjd: automatisk;
}
/* Ställ in stilar för knappen och placera den i mitten av behållaren/ bilden */
.container .btn {
  position: absolut;
  överst: 50%;
  vänster: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  bakgrundsfärg: # 555;
  färg: vit;
  teckensnittsstorlek: 16 px;
  inmatning: 12 px 24 px;
  gräns: inget;
  muspekare: pekare;
  kantradie: 5 px;
}
.container .btn:hover {
  background-color: black;
}

Prova själv