Back Button HTML dan CSS: Kembali ke Halaman Sebelumnya
Dalam pengembangan web, tombol "Back" merupakan bagian penting dari pengalaman pengguna yang baik. Tombol ini memungkinkan pengguna untuk dengan mudah kembali ke halaman sebelumnya dalam riwayat browser mereka. Meskipun tombol "Back" di browser secara otomatis ditampilkan, Anda dapat menggunakan HTML dan CSS untuk membuat tombol khusus yang memiliki fungsi yang sama.
Membangun Tombol Back dengan HTML
Untuk membuat tombol "Back", kita dapat menggunakan tag <button> dalam HTML:
Kode di atas akan menghasilkan tombol dengan teks "Kembali" yang, ketika diklik, akan menjalankan fungsi history.back(). Fungsi ini akan membawa pengguna kembali ke halaman sebelumnya dalam riwayat browser mereka.
Mempercantik Tombol dengan CSS
Untuk mempercantik tombol "Back", kita dapat menggunakan CSS. Berikut adalah contoh sederhana untuk membuat tombol dengan warna latar belakang biru dan teks putih:
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
Kode di atas akan memberikan gaya pada tombol dengan:
background-color: blue;: Warna latar belakang biru.color: white;: Warna teks putih.padding: 10px 20px;: Padding 10px di atas dan bawah, dan 20px di kiri dan kanan.border: none;: Menghilangkan border tombol.cursor: pointer;: Menampilkan kursor tangan saat mouse berada di atas tombol.
Tips dan Trik
- Anda dapat menyesuaikan penampilan tombol dengan berbagai property CSS seperti
font-family,font-size,border-radius, dan lain-lain. - Jika Anda ingin tombol "Back" hanya terlihat pada halaman tertentu, Anda dapat menggunakan CSS dengan selector
@mediaatau JavaScript untuk menampilkannya berdasarkan URL halaman. - Pastikan untuk menggunakan JavaScript yang valid dan aman untuk menghindari potensi masalah keamanan.
Kesimpulan
Dengan menggunakan HTML dan CSS, Anda dapat membuat tombol "Back" khusus yang meningkatkan pengalaman pengguna dan memudahkan navigasi website Anda. Jangan lupa untuk menyesuaikan tombol dengan desain website Anda dan memastikan fungsionalitasnya sesuai harapan.