Dalam pengembangan web, tombol memainkan peran penting dalam interaksi pengguna. Tombol dapat digunakan untuk berbagai keperluan, seperti mengirim formulir, membuka tautan, atau memicu aksi tertentu.
Artikel ini akan membahas cara membuat tombol HTML sederhana, yang bisa diterapkan di situs WordPress. Dan tentu saja, kami akan menyertakan script tombol nya juga, agar bisa langsung Anda pakai.
Script Tombol yang Tersedia
Jenis 1
Script tombol dengan tautan yang bisa dibuka di tab baru, dengan padding 15px
<a href="https://abc.com" target="_blank" style="text-decoration: none;">
<button style="padding: 15px;">Buka Formulir</button>
</a>
Tampilan tombol nya akan menjadi seperti ini:
Jenis 2
Script tombol dengan tautan yang bisa dibuka di tab yang sama, dengan padding 15px.
<a href="https://abc.com" target="_self" style="text-decoration: none;">
<button style="padding: 15px;">Buka Formulir</button>
</a>
Tampilan tombol nya akan menjadi seperti ini:
Cara Mengimplementasikan
Untuk mengimplementasikan nya, cukup masukan script tersebut ke mode “Text” pada post atau halaman editor WordPress Anda. Tidak perlu menambahkan kode tambahan apapun ke dalam website melalui menu function.php
Catatan
Kode tidak akan hilang meski diubah ke mode Visual
Kode yang kami berikan, tidak mengandalkan JavaScript. Disini, kami menggunakan elemen <a> dengan tag <button> di dalamnya. Dengan cara ini, Anda menghindari penggunaan JavaScript yang mungkin tidak diizinkan atau dibatasi oleh WordPress, sambil tetap mempertahankan fungsionalitas tombol untuk membuka tautan.
Penutup
Membuat tombol HTML sederhana adalah proses yang mudah dan cepat. Dengan menggabungkan HTML dasar, JavaScript, dan CSS, Anda dapat membuat tombol yang tidak hanya fungsional tetapi juga menarik secara visual. Tombol semacam ini dapat meningkatkan interaktivitas dan pengalaman pengguna di situs web Anda.
