Button merupakan salah satu elemen dari HTML yang mungkin paling sering Anda jumpai di dalam sebuah website. Biasanya button digunakan untuk melakukan submit form dan lain sebagainya. Namun, ternyata fungsi button bukan hanya itu saja, selain digunakan untuk submit atau reset, button juga bisa digunakan sebagai hyperlink. Bagaimana caranya?
Cara Membuat Button Link di HTML
Ada beberapa cara untuk membuat button link di HTML. Namun, semua caranya dapat Anda lakukan dengan sangat mudah. Langsung saja, silakan simak penjelasannya di bawah ini.
[ez-toc]
1. Membuat Button Link
Dalam membuat button link di HTML tentu sangatlah mudah. Anda tidak perlu menambahkan atribut-atribut yang mungkin kurang familiar untuk Anda. Karena untuk membuat button link di HTML Anda hanya membutuhkan tambahan tag saja yaitu tag <a href> sama seperti Anda membuat link ke halaman tertentu. Langsung saja, berikut ini contoh penggunaan script nya.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
</head>
<body>
<a href="https://www.nesabamedia.com"><button>Button Dengan Link</button></a>
</body>
</html>Pertama, buatlah tag button seperti Anda membuat button biasanya. Lalu, sebelum tag button tambahkan tag < a href> diikuti dengan link website yang ingin Anda tuju saat mengklik button tersebut. Dan tag penutupnya </a> harus berada setelah tag </button> ya. Seperti contoh di atas button akan mengarahkan Anda ke website nesabamedia.com.
Tampilan dari script di atas ditunjukkan pada gambar di bawah ini. Selamat mencoba!
2. Membuat Button Link dengan New Tab
Jika Anda ingin membuat button yang mana saat diklik menuju ke link dengan tab baru, maka cara kedua ini jawabannya. Pada cara pertama, saat button diklik link yang dituju akan terbuka tetap pada halaman tersebut atau tidak berpindah ke tab baru sehingga jika ingin kembali ke halaman sebelumnya Anda harus melakukan undo terlebih dahulu.
Jika Anda yang tidak mau ribet untuk melakukan undo, Anda bisa membuat link yang dituju terbuka di tab baru sehingga Anda hanya perlu mengklik tab tersebut tanpa harus melakukan undo. Berikut ini contoh penggunaan script nya.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
</head>
<body>
<a href="https://www.nesabamedia.com" target="_blank"><button>Button Dengan Link & New Tab</button></a>
</body>
</html>Sebenarnya penulisan script nya sama seperti cara pertama yaitu menggunakan tag <a href>, namun bedanya cara kedua ini ada tambahan atribut yaitu target=”_blank”. Untuk membuat link nya menjadi tab baru maka Anda harus menambakan atribut tersebut, jika tidak maka link Anda akan tetap berada di halaman tersebut.
Berikut ini contoh tampilan dari script di atas. Jika Anda mengklik button tersebut, maka tab baru akan terbuka sesuai dengan link yang tuju. Selamat mencoba!
3. Membuat Button Link dengan Javascript
Cara ketiga untuk membuat button link adalah dengan menggunakan kode javascript. Namun, pastikan browser Anda mendukung javascript, jika tidak maka button Anda tidak akan bekerja. Langsung saja berikut ini contoh penggunaan script nya.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
</head>
<body>
<!-- Contoh 1 -->
<button onclick="window.location.href='namafile.html'">Link 1</button>
<br><br>
<!-- Contoh 2 -->
<button onclick="window.location.href='https://nesabamedia.com'">Link 2</button>
</body>
</html>Jadi, untuk membuat button link dengan javascript yang harus Anda tambahkan di dalam tag <button> adalah onclick. Value dari atribut onclick adalah kode javascript. Ada dua perbedaan dari penulisan link di atas. Anda dapat menggunakan penulisan link di contoh pertama jika link ang dituju berada pada situs yang sama. Sedangkan contoh kedua jika link yang dituju berbeda situs. Anda bisa gunakan sesuai dengan keinginan dan kebutuhan Anda. Selamat mecoba!
4. Membuat Button Link dengan CSS
Jika menurut Anda tampilan button link seperti itu-itu saja atau terlihat monoton, Anda bisa menambahkan script CSS untuk mempercantik button link Anda. Berikut ini contoh script CSS yang bisa Anda gunakan.
<style>
button{
font-family: sans-serif;
font-size: 15px;
background: #22a4cf;
color: white;
border: white 3px solid;
border-radius: 5px;
padding: 12px 20px;
margin-top: 10px;
}
button:hover{
opacity:0.9;
}
</style>Script yang paling umum digunakan untuk mempercantik button seperti:
- background untuk memberi warna pada button
- color untuk memberi warna pada tulisan di button
- border untuk membuat garis pinggir pada button
- border radius untuk membuat lengkungan pada button
- padding untuk memberi jarak antar tulisan dan button
- margin untuk mengatur jarak button dengan elemen lainnya
Lalu, berikut ini contoh script button link nya.
<body>
<a href="https://www.nesabamedia.com" target="_blank">
<button class="button">Button Dengan Link & New Tab</button></a>
</body>Anda tidak perlu menambahkn class pada button, karena Anda hanya memanggil tag button di CSS nya. Berikut ini tampilan dari hasil script di atas. Selamat mencoba!
Sekian artikel kali ini yang membahas tentang bagaimana caranya membuat button link di HTML. Ada beberapa cara dan variasi yang bisa Anda gunakan. Silakan Anda gunakan sesuai dengan kebutuhan Anda. Semoga artikel ini dapat membantu dan bermanfaat bagi Anda. Terimakasih 🙂
Editor: Muchammad Zakaria
Read More:
Download berbagai jenis aplikasi terbaru, mulai dari aplikasi windows, android, driver dan sistem operasi secara gratis hanya di Nesabamedia.com:
di kasus saya kok gabisa ya, apa karena ada type data sama class ya.. saya kasih elemen type=submit apa itu ngaruh kah?
Boleh dibagikan source codenya dikomentar?
terima kasih ilmunya ^^