Cara Membuat Button Pada Image

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara menambahkan tombol ke gambar dengan CSS.

Tombol pada Gambar(Button on Image)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #0000FF;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container .btn:hover {
  background-color: black;
}
</style>
</head>
<body>

<h2>Contoh Button Pada Image</h2>
<p>Tabahkan Button Pada Image:</p>

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg" alt="Snow" style="width:100%">
  <button class="btn">Klik</button>
</div>

</body>
</html>

Cara Menambahkan Tombol di atas Gambar(Button on Image)

Langkah 1) Tambahkan HTML:
Contoh

<div class="container">
  <img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg" alt="Snow" style="width:100%">
  <button class="btn">Klik</button>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Container diperlukan untuk memosisikan tombol. Sesuaikan lebarnya sesuai dengan kebutuhan*/
.container {
  position: relative;
  width: 50%;
}

/* Buat gambar menjadi responsif */
.container img {
  width: 100%;
  height: auto;
}

/* Style tombol dan letakkan di tengah container / gambar */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}