Membangun Tombol "Back Arrow" dengan HTML dan CSS
Tombol "back arrow" atau "arrow back" sering digunakan dalam desain web untuk memberikan navigasi yang mudah dan intuitif bagi pengguna. Tombol ini biasanya digunakan untuk kembali ke halaman sebelumnya atau untuk menavigasi ke menu utama. Artikel ini akan membahas cara membangun tombol "back arrow" sederhana dengan HTML dan CSS.
HTML Struktur
Pertama, kita akan membuat struktur dasar tombol "back arrow" dengan menggunakan tag <button> dalam HTML. Kita akan menambahkan sebuah icon "arrow left" yang bisa diakses dari font icon library seperti Font Awesome atau Material Icons.
Tombol Back Arrow
Kode di atas:
- Menyertakan file CSS eksternal (
style.css) untuk mengatur gaya tombol. - Menyertakan Font Awesome (Anda bisa menggunakan library lain)
- Membuat tombol dengan class
back-arrow - Menggunakan icon
fas fa-arrow-leftdari Font Awesome - Menambahkan teks "Kembali" sebagai label tombol.
CSS Styling
Sekarang kita akan mengatur gaya tombol dengan CSS. Anda dapat menyesuaikan gaya ini sesuai dengan kebutuhan desain Anda.
.back-arrow {
background-color: #4CAF50; /* Warna latar belakang tombol */
color: white; /* Warna teks tombol */
padding: 10px 20px; /* Jarak dalam tombol */
border: none; /* Menghapus border */
border-radius: 5px; /* Membulatkan sudut tombol */
cursor: pointer; /* Mengubah kursor menjadi pointer saat di hover */
font-size: 16px; /* Ukuran font */
transition: background-color 0.3s ease; /* Efek transisi saat di hover */
}
.back-arrow:hover {
background-color: #3e8e41; /* Warna latar belakang saat di hover */
}
.back-arrow i {
margin-right: 10px; /* Jarak antara icon dan teks */
}
Kode di atas:
- Mengatur warna latar belakang, warna teks, padding, border, border radius, kursor, ukuran font, dan transisi.
- Mengatur warna latar belakang saat tombol di hover.
- Mengatur jarak antara icon dan teks.
Pengaturan dan Penyesuaian
- Anda dapat mengubah warna, ukuran, bentuk, dan gaya tombol dengan memodifikasi properti CSS.
- Anda dapat menggunakan icon yang berbeda dari library Font Awesome atau library icon lainnya.
- Anda dapat menambahkan efek transisi lain seperti efek bayangan untuk memberikan tampilan yang lebih menarik.
Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat tombol "back arrow" sederhana yang dapat digunakan di situs web Anda. Anda dapat menyesuaikan tampilan tombol dengan kebutuhan desain Anda dengan memodifikasi kode CSS.