Cara Membuat Notification 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 notification button(tombol notifikasi) dengan CSS.

Notification Button

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: blue;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}
</style>
</head>
<body>

<h1>Notification Button</h1>

<a href="#" class="notification">
  <span>Notif Masuk</span>
  <span class="badge">3</span>
</a>

</body>
</html>

Cara Membuat Notification Button

Langkah 1) Tambahkan HTML:
Contoh

<a href="#" class="notification">
  <span>Notif Masuk</span>
  <span class="badge">3</span>
</a>

Langkah 2) Tambahkan CSS:
Contoh

.notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: blue;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}