Cara Membuat Button Alert(Peringatan)

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

by Hanifah Nurbaeti January 29, 2021

Di bawah ini ada kita akan mempelajari cara mengatur gaya tombol “Alert” dengan CSS. Di bawah ini ada contohnya

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

.success {background-color: #4CAF50;} /* Hijau */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Biru */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Merah */ 
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Abu-Abu */ 
.default:hover {background: #ddd;}
</style>
</head>
<body>

<h1>Alert 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 Tombol Peringatan

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: none; /* Hapus borders */
  color: white; /* Tambahkan warna teks */
  padding: 14px 28px; /* Tambahkan padding */
  cursor: pointer; /* Tambahkan kursor pointer ke atas mouse */
}

.success {background-color: #4CAF50;} /* Hijau */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Biru */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Merah */
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Abu-abu */
.default:hover {background: #ddd;}