WEBTEKNOLOGI - Interaktivitas dan kemudahan akses merupakan dua hal penting yang dibutuhkan oleh pengguna saat mengakses konten di website atau aplikasi.
Salah satu fitur yang sering digunakan untuk meningkatkan interaktivitas dan kemudahan akses adalah floating button atau tombol melayang.
Floating button adalah sebuah tombol atau ikon yang secara visual "melayang" di atas konten utama pada halaman website atau aplikasi.
Tombol ini biasanya berisi fungsi atau aksi tertentu yang dapat diakses pengguna dengan mudah, tanpa harus mencari atau menggulir halaman.
Manfaat Penggunaan Floating
Penggunaan floating button sendiri memiliki banyak manfaat, di antaranya:
1. Meningkatkan Aksesibilitas: Floating button memungkinkan pengguna untuk mengakses fitur atau aksi penting dengan cepat dan mudah, bahkan saat mereka sedang menjelajahi konten lain di halaman.
2. Meningkatkan Keterlibatan Pengguna: Kehadiran floating button yang selalu terlihat dapat mendorong pengguna untuk berinteraksi lebih sering dengan website atau aplikasi, meningkatkan keterlibatan mereka.
3. Meningkatkan Konversi: Dengan menempatkan tombol-tombol penting, seperti "Beli Sekarang" atau "Hubungi Kami", dalam bentuk floating button, dapat membantu meningkatkan konversi pengguna.
4. Desain yang Menarik: Floating button yang dirancang dengan baik dapat menambah keindahan dan kemenarikan desain halaman web atau aplikasi.
Nah, bagaimana Anda bisa membuat floating button dengan kode HTML? Berikut adalah langkah-langkahnya:
Struktur HTML
Pertama-tama, buatlah struktur HTML dasar untuk halaman Anda. Di dalam elemen `<body>`, tambahkan sebuah elemen `<div>` untuk mewadahi floating button.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Button Example</title>
</head>
<body>
<div class="floating-button">
<!-- Isi floating button akan ditambahkan di sini -->
</div>
</body>
</html>
Styling dengan CSS
Selanjutnya, tambahkan gaya CSS untuk membuat floating button. Anda bisa menggunakan properti `position` untuk membuat tombol "melayang" di atas konten.
css
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.floating-button:hover {
transform: scale(1.1);
}
Dalam contoh di atas, floating button ditempatkan di sudut kanan bawah halaman dengan jarak 20 piksel dari tepi. Tombol memiliki lebar dan tinggi 50 piksel, dengan warna latar belakang biru dan warna teks putih.
Tombol juga dibuat berbentuk lingkaran dengan `border-radius: 50%`. Efek bayangan dan transisi `transform` pada saat hover ditambahkan untuk memberikan sentuhan visual yang menarik.
Menambahkan Ikon atau Teks
Sekarang, Anda bisa menambahkan ikon atau teks ke dalam floating button. Misalnya, menggunakan font ikon seperti Font Awesome atau menambahkan teks sederhana.
html
<div class="floating-button">
<i class="fas fa-plus"></i>
</div>
Atau:
html
<div class="floating-button">
<span>+</span>
</div>
Menambahkan Fungsi Klik
Terakhir, Anda bisa menambahkan event listener untuk menangani klik pada floating button. Contohnya, Anda bisa menambahkan fungsi untuk membuka modal, menampilkan menu, atau menjalankan aksi lainnya.
javascript
const floatingButton = document.querySelector('.floating-button');
floatingButton.addEventListener('click', () => {
// Tambahkan logika yang ingin Anda jalankan saat tombol diklik
console.log('Floating button clicked!');
});
Nah, itulah cara membuat floating button dengan kode HTML, CSS, dan JavaScript. Dengan mengikuti langkah-langkah di atas, Anda bisa dengan mudah menambahkan fitur floating button yang interaktif dan menarik ke dalam website atau aplikasi Anda. (Webteknologi/Admin)
0 Komentar untuk "Floating Button Melayang Dengan Kode HTML"