Cara Membuat Outline Buttons

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 garis(Outline Buttons) dengan CSS. Berikut ini adalah contoh outline buttons(tombol dengan garis diluar)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Hijau */
.success {
  border-color: #4CAF50;
  color: green;
}

.success:hover {
  background-color: #4CAF50;
  color: white;
}

/* Biru */
.info {
  border-color: #2196F3;
  color: dodgerblue;
}

.info:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Merah */
.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Abu-Abu */
.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}
</style>
</head>
<body>

<h1>Beberapa Contoh Outline Buttons</h1>

<button class="btn success">Sukses</button>
<button class="btn info">Info</button>
<button class="btn warning">Peringatan</button>
<button class="btn danger">Bahaya</button>
<button class="btn default">Default</button>

</body>
</html>

Cara Menata Outline Buttons

Langkah 1) Tambahkan HTML:
Contoh

<button class="btn success">Sukses</button>
<button class="btn info">Info</button>
<button class="btn warning">Peringatan</button>
<button class="btn danger">Bahaya</button>
<button class="btn default">Default</button>

Langkah 2) Tambahkan CSS:
Contoh

.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Hijau */
.success {
  border-color: #4CAF50;
  color: green;
}

.success:hover {
  background-color: #4CAF50;
  color: white;
}

/* Biru */
.info {
  border-color: #2196F3;
  color: dodgerblue;
}

.info:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Merah */
.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Abu-Abu */
.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}

Tambahkan properti radius-batas untuk membuat tombol kerangka bulat:

Contoh