Cara Membuat Block Button

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

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara mengatur gaya tombol blok (lebar penuh) dengan menggunakan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.block {
  display: block;
  width: 100%;
  border: none;
  background-color: #808080;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.block:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<h2>Contoh Full Width Buttons</h2>

<button class="block">Block Button</button>

</body>
</html>

Cara Menerapkan Style Block Buttons

Langkah 1) Tambahkan HTML:
Contoh

<button class="block">Block Button</button>

Langkah 2) Tambahkan CSS:
Untuk membuat tombol lebar penuh, tambahkan lebar 100% dan jadikan itu menjadi elemen blok:
Contoh

.block {
  display: block;
  width: 100%;
  border: none;
  background-color: #808080;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.block:hover {
  background-color: #ddd;
  color: black;
}