Floating Action Button (FAB) adalah sebuah tombol yang berbentuk lingkaran dan ditampilkan seperti melayang pada aplikasi android. FAB biasanya terletak di sebelah kanan bawah aplikasi dan berfungsi untuk memulai aksi utama, seperti membuat chat baru.
WhatsApp adalah salah satu aplikasi yang menggunakan FAB untuk memudahkan pengguna mengirim pesan ke kontak atau grup mereka. FAB WhatsApp memiliki ikon logo WhatsApp dan berwarna hijau. Jika pengguna menekan FAB WhatsApp, maka aplikasi akan membuka halaman untuk memilih kontak atau grup yang ingin dikirimi pesan.
Untuk membuat FAB WhatsApp pada halaman web, kita perlu menggunakan beberapa kode HTML, CSS, dan JavaScript. Kode HTML berisi elemen tombol yang mengarahkan ke tautan WhatsApp dengan nomor dan pesan yang diinginkan. Kode CSS berisi gaya untuk menampilkan tombol dengan bentuk, warna, dan posisi yang sesuai. Kode JavaScript berisi fungsi untuk menambahkan efek animasi pada tombol saat dihover atau diklik.
Berikut adalah contoh kode untuk membuat FAB WhatsApp:
html
body {
font-family: sans-serif;
}
/* Add WA floating button CSS */
.floating {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #25d366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.fab-icon {
margin-top: 16px;
}
Hasil dari kode di atas adalah sebagai berikut:
