Cara Membuat Pill Button

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

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membuat tombol pil dengan menggunakan CSS.

Pill Button

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

.button:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Pill Buttons</h2>

<button class="button">Pill Button Satu</button>
<button class="button">Pill Button Dua</button>

</body>
</html>

Cara Membuat Pill Button

Langkah 1) Tambahkan HTML:
Contoh

<button class="button">Pill Button</button>

Langkah 2) Tambahkan CSS:
Tambahkan sudut membulat ke tombol dengan properti border-radius:
Contoh

.button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}