Membuat Tombol Link dengan HTML & CSS
Tombol link atau button link adalah elemen HTML yang berfungsi sebagai tautan ke halaman web lain atau bagian lain dari halaman yang sama. Tombol link biasanya digunakan untuk menyertakan call to action (CTA) pada website, seperti "Beli Sekarang", "Pelajari Lebih Lanjut", atau "Daftar Sekarang".
HTML untuk Tombol Link
Untuk membuat tombol link, gunakan tag <button> dan tambahkan atribut href di dalam tag <a>:
Kode di atas akan membuat tombol dengan teks "Kunjungi Website" yang merupakan link ke website https://www.example.com.
CSS untuk Styling Tombol Link
Anda dapat menggunakan CSS untuk mengatur tampilan tombol link, seperti warna latar belakang, warna teks, ukuran, dan bentuk. Berikut contoh CSS untuk tombol link:
button {
background-color: #4CAF50; /* Warna latar belakang */
border: none; /* Menghilangkan border */
color: white; /* Warna teks */
padding: 15px 32px; /* Padding */
text-align: center; /* TextAlign */
text-decoration: none; /* Menghilangkan underline */
display: inline-block; /* Menampilkan tombol secara inline */
font-size: 16px; /* Ukuran font */
cursor: pointer; /* Mengubah cursor menjadi pointer saat hover */
border-radius: 5px; /* Membuat sudut membulat */
}
button:hover {
background-color: #3e8e41; /* Warna latar belakang saat hover */
}
Kode CSS di atas akan membuat tombol link dengan:
- Warna latar belakang: Hijau
- Warna teks: Putih
- Padding: 15px di atas/bawah dan 32px di kiri/kanan
- TextAlign: Center
- Ukuran font: 16px
- Sudut membulat: 5px
Saat mouse dihover di atas tombol, warna latar belakang akan berubah menjadi hijau tua.
Contoh Implementasi
Berikut adalah contoh implementasi HTML dan CSS untuk membuat tombol link:
Tombol Link
Kode HTML di atas akan menampilkan tombol link "Kunjungi Website" dengan styling sesuai CSS yang telah ditentukan.
Kesimpulan
Dengan menggabungkan HTML dan CSS, Anda dapat membuat tombol link yang menarik dan fungsional untuk website Anda. Anda dapat menyesuaikan styling tombol sesuai kebutuhan dengan menggunakan berbagai properti CSS yang tersedia.