Pemrograman

Bahasa

Framework

Peralatan

Info

Membuat Kode CSS untuk Badge Notifikasi

– 22 June 2016
Badge notifikasi sering kali kita temukan dalam website maupun aplikasi. Terkadang badge tersebut menggoda kita untuk mengelik link atau tombol notifikasi. Itulah fungsinya, agar user tau, di sana ada sesuatu yang baru. Badge biasanya dilengkapi dengan angka penghitung.

Framework antarmuka semacam Bootstrap sudah menyediakan class sendiri untuk pembuatan badge. Namun, karena badge yang dihasilkan tidak sesui seperti harapan, maka kita harus membuatnya sendiri.

Kode CSS

.badge-notif {
        position:relative;
}

.badge-notif[data-badge]:after {
        content:attr(data-badge);
        position:absolute;
        top:-10px;
        right:-10px;
        font-size:.7em;
        background:#e53935;
        color:white;
        width:18px;
        height:18px;
        text-align:center;
        line-height:18px;
        border-radius: 50%;
}
Pada kode CSS di atas, kita mengambil isi badge dari atribut data-badge. Untuk posisi badge dapat diatur dalam properti top dan right. Warna, ukuran, font, background dll. bisa diatur sendiri sesui selera.

Penggunaan di HTML

Elemen yang ingin menggunakan badge yang dibuat tadi harus menambahkan class badge-notif dan sebuah atribut data-badge untuk konten badge-nya. Contoh:

Pada Tombol
<button class="badge-notif" data-badge="12">Notifikasi</button>
Pada Link
<a href="#!" class="badge-notif" data-badge="22">Pesan</a>

Demo

JS Bin on jsbin.com

1 comment :