Mau punya web yang interaktif dan user-friendly? Salah satu langkah yang patut dicoba yakni membuat HTML button. Ada berbagai button yang dapat dibuat. Masing-masing punya fungsi berbeda untuk segala kebutuhanmu.
Button adalah elemen penting pada sebuah web. Fungsinya untuk menjalankan skrip, trigger perintah tertentu, atau mengirim form. Kamu wajib tau coding yang efektif supaya button meningkatkan pengalaman pengguna.
Mengingat ada beberapa variasi button, yuk intip contoh-contoh coding-nya sebagai berikut!
Sekilas tentang HTML Button
Button sebetulnya hanya tombol tak berguna kalau tidak diintegrasikan dengan perintah. Biasanya button menggunakan JavaScript untuk melakukan aksi yang diinginkan.
Contohnya aksi seperti menampilkan informasi tertentu hingga mengirimkan data form login. Ada juga HTML button link yang fungsinya sebagai navigasi ke halaman lain.
Itu konsep dasar button yang perlu dipahami. Selain itu, tampilan button bisa dipercantik dengan CSS.
Nantinya button bebas didesain mengikuti warna dan tema website. Pastinya ini turut meningkatkan pengalaman pengguna saat mengakses web.
Contoh Coding HTML Button dengan Mudah
Nah, khusus untukmu sudah dibuatkan kumpulan contoh coding HTML berbagai button. Mulai dari search button, reset button, login button, dan lainnya. Yuk, lihat selengkapnya di bawah ini:
1. Search Button HTML
Tombol pencarian akan memudahkan pengguna menemukan hal yang diinginkannya. Untuk menjalankan fungsi ini, manfaatkan fungsi button submit. Adapun contoh codingnya, yaitu:
<form action="action_page.php">
<input type="text" placeholder="CARI PRODUK.." name="search">
<button type="submit"><i></i></button>
</form>2. Reset HTML Button
Button ini berguna mengembalikan form pendaftaran yang sebelumnya sudah diisi. Sehingga kesannya form tersebut belum pernah diisi. Kamu harus membuat form login dulu, lalu ditambah button reset, seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Coding Reset Button</title>
</head>
<body>
<form action="localhost/form-tujuan" method="post">
<input type="text" name="Nama"/>
<input type="password" name="Kata Sandi"/>
<input type="submit" value="Masuk"/>
<button type="reset" value="Reset"/>
</form>
</body>
</html>
3. Share Button HTML
Share button berguna membantu menyebarkan konten yang ada di website dengan mudah. Ini juga bisa dimanfaatkan untuk membuat WhatsApp share button HTML.
Kamu bisa semakin terkoneksi dengan pengunjung jika menambahkan button ini. Contoh coding yang bisa diikuti yaitu:
<html>
<head>
<title>Contoh Tombol Share WhatsApp</title>
</head>
<body>
<h1>Contoh Tombol Share WhatsApp</h1>
<p>Isi dengan pesan pembuka yang ingin dikirim ke WhatsApp.</p>
<a href="https://wa.me/081xxxxx"><img src="contact_us.png"></a>
</body>
</html>Cara di atas sama seperti cara membuat button link di HTML. Tautan yang digunakan bisa diganti ke tautan sosial media lain. Seperti Instagram, Facebook, Twitter, atau lainnya. Tinggal sesuaikan dengan kebutuhan.
4. Back Button
Back button memudahkan navigasi pengguna selama di web. Button ini memanfaatkan atribut onclick. Itu artinya perintah aktif ketika kamu mengkliknya. Contoh coding-nya sangat sederhana, seperti berikut:
<p><button type="button" onclick="window.history.back()">Kembali</button></p>5. HTML Refresh Page Button
Jangan tertukar antara refresh button dengan reset button. Keduanya sepintas memiliki fungsi yang mirip. Tetapi refresh button berfungsi menyegarkan suatu halaman.
Khususnya kalau baru saja ada pembaruan konten di halaman tersebut. HTML button ini menggunakan fungsi submit untuk menjalankan fungsinya. Berikut contoh coding-nya:
<button type="button" value="Muat Ulang" onclick="location.reload();">6. Login Button HTML
Memasang form login di website akan membantu melindungi data pengguna. Itulah pentingnya membuat login button di website kamu.
Data-data pengguna yang tersimpan berguna untuk memantau aktivitas mereka selama di web. Langsung saja lihat contoh cara membuat tombol login di HTML:
<!DOCTYPE HTML>
<head>
<title>FORM LOGIN</title>
</head>
<body>
<h1>HALAMAN LOGIN</h1>
<form action="login_action.php" method="post">
<label for="namalengkap">NAMA LENGKAP:</label>
<input type="text" id="namalengkap" name="namalengkap" required>
<br>
<label for="katasandi">KATA SANDI:</label>
<input type="password" id="katasandi" name="katasandi" required>
<br>
<button type="submit">LOGIN</button>
</form>
</body>
</html>7. Subscribe to Newsletter Button
Sekiranya website kamu menawarkan langganan ke berita-berita terkini, button ini akan sangat berguna. HTML button ini membantu mengumpulkan email pengunjung secara otomatis. Coding yang bisa digunakan yaitu:
<!DOCTYPE html>
<head>
<title>Tombol Subscribe ke Newsletter</title>
</head>
<body>
<h1>Subscribe ke Newsletter</h1>
<form action="subscribe_action.php" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Subscribe</button>
</form>
</body>
</html>Tips Menggunakan HTML Button di Website
Selain memahami contoh-contoh button di atas, ada beberapa hal yang perlu dipahami. Salah langkah saja bisa-bisa button tidak berfungsi saat diklik. Untuk itu, simak dulu tips-tips berikut:
1. Jangan Terlalu Banyak Button
Terlalu banyak button akan mengganggu fokus siapa pun yang melihatnya. Gunakan button sesuai kebutuhan penting saja agar pengunjung website tidak bingung.
2. Jangan Salah Pakai Tipe Button
Ada tiga button utama di HTML, yaitu reset, submit, dan button. Jangan sampai tertukar antara ketiga fungsi button tersebut. Nantinya button malah tidak menjalankan perintah yang diinginkan.
3. Gunakan Label yang Sesuai
Kamu bisa menggunakan kalimat aktif atau CTA untuk melabeli tombol. Contohnya beli sekarang, chat dengan kami, kirim, dan lain sebagainya. Label tersebut juga memudahkan pengunjung memahami fungsi tombol tersebut.
4. Desain dengan Warna yang Kontras
Jangan lupa desain HTML button dengan CSS agar hasilnya semakin memikat perhatian. Dalam menentukan warna, pilih warna yang kontras dari halaman. Dengan begitu pengunjung akan tertarik mengklik tombol tersebut.
Optimalkan Website dengan Hosting Terbaik
Pastikan website menggunakan hosting terbaik supaya performanya lancar. Percuma saja jika website interaktif, tetapi sering downtime. Sudah bagus-bagus, tetapi sering kehilangan calon pengunjung.
Kamu bakal rugi sendiri nantinya. Biar hal itu tidak terjadi, pilihlah layanan web hosting dengan jaminan uptime 99.9% dari Jagoan Hosting. Dengan dukungan support via WhatsApp, kamu bakal langsung mendapat jawaban tanpa menunggu lama.
Jangan biarkan performa website yang sudah didesain dengan HTML button terhambat. Segera gunakan layanan hosting murah terbaik dari Jagoan Hosting. Kunjungi dan temukan paket hosting sesuai kebutuhanmu!
FAQ
Bagaimana cara membuat tombol dalam HTML berfungsi?
Supaya button berfungsi, kamu harus menambahkan perintah JavaScript. Alternatifnya, hubungkan button dengan form yang sudah ada.
Bagaimana cara membuat tombol link di HTML?
Gunakan elemen <a> yang diikuti href untuk menuju ke tautan yang dibutuhkan. Contoh coding HTML button href yaitu <a href=”link.html”>Buka Link<a/>.
Bagaimana cara mengatur HTML button height and width?
Kamu bisa menggunakan CSS untuk mendesain HTML button secara leluasa. Nantinya button bisa dibuat lebih tinggi atau lebar sesuai kemauan. CSS juga memungkinkanmu mengganti jenis font, warna, hingga bentuk button.
