Belajar HTML: Cara Membuat dan Kustomisasi Button Link
Irhan Hisyam Dwi Nugroho
•
11 December 2024
•
542
Cara membuat button link di HTML itu penting banget buat Warga Bimbingan yang mau bikin website interaktif. Dengan button link, pengunjung bisa diarahkan ke halaman lain atau melakukan aksi tertentu.
Tapi, gak cuma soal fungsional, button juga harus tampil menarik biar pengunjung makin betah. Desain yang kece bikin button lebih mencuri perhatian.
Di artikel ini, MinDi bakal ajarin cara simpel bikin button link di HTML sekaligus tips untuk kustomisasinya. Yuk, kita mulai!
Baca juga: 5 Contoh Topologi Tree Beserta Fungsi dan Pengertiannya
Pengertian Button Link di HTML
Button link di HTML adalah elemen yang berfungsi sebagai tombol yang dapat diklik untuk mengarahkan pengguna ke halaman lain atau menjalankan suatu aksi.
Biasanya, button link dibuat menggunakan tag <button> atau <a> yang dikustomisasi agar terlihat seperti tombol.
Elemen ini sering digunakan untuk meningkatkan interaktivitas dan navigasi pada sebuah website.
Dengan desain yang tepat, button link juga dapat menarik perhatian pengguna dan meningkatkan pengalaman mereka saat menjelajahi website.
Baca juga: 10 Contoh Analisis SWOT Salad Buah untuk Bisnis Sukses
Cara Membuat Button Link di HTML
Sumber: Canva
Untuk membuat button link di HTML, ada beberapa cara yang bisa Warga Bimbingan gunakan sesuai kebutuhan. Berikut penjelasan dari setiap metode yang mudah dipahami:
1. Membuat Button Link
Button link paling dasar dibuat menggunakan tag <a>. Ini adalah cara termudah untuk mengarahkan pengguna ke halaman lain hanya dengan teks sederhana yang berfungsi sebagai tombol.
Meskipun tampilannya minimal, elemen ini sangat fungsional. Anda dapat menambahkan URL tujuan menggunakan atribut href.
Kode Program:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button Link</title> </head> <body> <a href="https://www.example.com">Klik Aku</a> </body> </html> |
Hasil Program:
Gambar Button Click
Penjelasan Kode:
Tag <a> adalah elemen hyperlink yang digunakan untuk membuat link. Atribut href menentukan URL tujuan, dalam hal ini https://www.example.com.
Teks "Klik Aku" adalah isi dari link yang terlihat di halaman. Ketika pengguna mengekliknya, mereka akan diarahkan ke halaman yang ditentukan.
2. Membuat Button Link dengan New Tab
Jika ingin link terbuka di tab baru, atribut tambahan target="_blank" digunakan. Cara ini sering diterapkan untuk menjaga pengguna tetap berada di halaman utama sambil membuka halaman baru secara bersamaan.
Hal ini sangat berguna untuk keperluan seperti tautan eksternal atau referensi tambahan. Berikut adalah implementasinya.
Kode Program:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button Link New Tab</title> </head> <body> <a href="https://www.example.com" target="_blank">Klik Aku</a> </body> </html> |
Hasil Program:
Gambar Button Link New Tab
Penjelasan Kode:
Atribut target="_blank" memerintahkan browser untuk membuka link di tab baru. Tag <a> tetap digunakan untuk hyperlink, dengan href menentukan URL tujuan.
Teks "Klik Aku" adalah elemen visual dari link tersebut. Dengan klik, pengguna tetap di halaman utama namun bisa melihat halaman baru di tab terpisah.
3. Membuat Button Link dengan JavaScript
Menggunakan JavaScript, button link dapat dirancang lebih fleksibel dan interaktif. Dalam metode ini, tag <button> digunakan bersama atribut onclick untuk menjalankan aksi.
JavaScript memungkinkan kita menentukan URL yang akan dituju ketika tombol diklik. Berikut contoh implementasinya.
Kode Program:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button Link JavaScript</title> </head> <body> <button onclick="window.location.href='https://www.example.com';">Klik Aku</button> </body> </html> |
Hasil Program:
Gambar Button Link Javascript
Penjelasan Kode:
Tag <button> digunakan untuk membuat tombol, sedangkan atribut onclick menentukan aksi yang dilakukan saat tombol diklik. Perintah window.location.href dalam JavaScript mengarahkan pengguna ke URL tujuan.
Tombol dengan teks "Klik Aku" akan menjalankan skrip tersebut dan membuka halaman baru saat diklik.
Baca juga: 5 Contoh Quick Sort Beserta Fungsi dan Pengertiannya
4. Membuat Button Link dengan CSS
Menggunakan CSS, button link bisa tampil lebih menarik dengan warna, padding, dan radius sudut.
Teknik ini memungkinkan tag <a> tampil seperti tombol tanpa mengubah fungsi dasarnya. Ini adalah cara terbaik untuk menciptakan pengalaman visual yang baik bagi pengguna.
Kode Program:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button Link CSS</title> <style> .button-link { display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 5px; font-size: 16px; } .button-link:hover { background-color: #45a049; } </style> </head> <body> <a href="https://www.example.com" class="button-link">Klik Aku</a> </body> </html> |
Hasil Program:
Gambar Button Link CSS
Penjelasan Kode:
Tag <a> digunakan untuk membuat link, dengan gaya tambahan melalui CSS untuk membuatnya terlihat seperti tombol. Properti seperti padding, background-color, dan border-radius memberikan tampilan menarik.
Kelas button-link mendefinisikan gaya utama, sementara efek hover menambahkan perubahan warna untuk interaksi yang lebih baik.
Baca juga: 3 Tipe Data yang Digunakan untuk Bilangan Pecahan
Contoh Implementasi di HTML
Sumber: Canva
Untuk memahami cara membuat button link di HTML, berikut adalah implementasi praktis dengan struktur sederhana yang mudah dipahami:
Contoh Skenario Button Link:
Misalkan kamu sedang membuat halaman landing untuk sebuah toko online, dan ingin menampilkan tombol "Lihat Produk" yang menarik perhatian pengguna.
Tombol ini ditempatkan di bawah heading utama yang menjelaskan tujuan halaman. Berikut adalah implementasi lengkap dengan elemen pendukung seperti heading dan deskripsi.
Kode Implementasi
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halaman Produk Kami</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; background-color: #f9f9f9; color: #333; } h1 { font-size: 36px; margin-top: 50px; } p { font-size: 18px; margin: 20px 0; } .product-button { display: inline-block; padding: 12px 24px; background-color: #007BFF; color: white; text-decoration: none; font-size: 18px; font-family: Arial, sans-serif; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.3s ease; margin-top: 20px; } .product-button:hover { background-color: #0056b3; } </style> </head> <body> <!-- Heading utama --> <h1>Selamat Datang di Toko Kami</h1> <!-- Deskripsi --> <p>Temukan berbagai produk terbaik kami dengan harga spesial. Klik tombol di bawah untuk melihat daftar produk lengkap kami!</p> <!-- Tombol "Lihat Produk" --> <a href="https://www.example.com/products" class="product-button">Lihat Produk</a> </body> </html> |
Hasil Kode Program:
Gambar Button Link
Penjelasan Kode Program:
Heading (<h1>):
- Heading utama "Selamat Datang di Toko Kami" menarik perhatian dan memberikan pesan utama halaman.
Deskripsi (<p>):
- Paragraf deskripsi memberikan konteks dan alasan mengapa pengguna perlu mengklik tombol.
Tombol Link (<a>):
- Tombol "Lihat Produk" dibuat dengan tag <a> dan dihiasi menggunakan CSS.
- Properti CSS seperti background-color, padding, dan border-radius membuatnya terlihat profesional dan responsif.
Tata Letak dan Gaya:
- Elemen-elemen ditempatkan di tengah halaman menggunakan text-align: center.
- Warna latar halaman yang terang dengan teks gelap memberikan kontras yang nyaman untuk dibaca.
Baca juga: Kegunaan Float dalam Konversi Tipe Data dan Contohnya
Siap Jadi Web Developer Profesional? Yuk Ikuti Bootcamp Web Development!
Setelah belajar cara membuat dan mengkustomisasi button link di HTML, kini saatnya mengembangkan kemampuanmu lebih jauh untuk membangun website yang profesional dan interaktif!
Bergabunglah di Bootcamp Web Development di dibimbing.id! Kamu akan mempelajari tidak hanya HTML, tapi juga CSS, JavaScript, dan berbagai teknologi terbaru dalam pengembangan web. Semua diajarkan secara praktis oleh mentor berpengalaman.
Kurikulum dirancang untuk membantumu memahami konsep dengan jelas dan mengaplikasikannya pada proyek nyata. Dengan dukungan 700+ hiring partner dan tingkat keberhasilan alumni 95%, kesempatanmu menjadi Web Developer profesional semakin dekat.
Jangan tunggu lama Hubungi disini! Daftar sekarang di dibimbing.id dan mulai perjalanan karier cemerlangmu di dunia IT. #BimbingSampeJadi!
Referensi:
- HTML Introduction [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
