Seperti yang diketahui, button ini merupakan salah satu elemen dari html yang memiliki 2 fungsi. Kedua fungsi dari button ini antara lain submit form dan reset form. Namun, tahukah Anda bahwa button ini tidak hanya digunakan untuk submit maupun reset? Button pada html ini ternyata juga bisa digunakan sebagai hperlink loh.
Namun bagaimana cara membuat button link di html? Dalam membuat button link di html pada dasarnya sangatlah mudah.Sebab, Anda tidak perlu menambahkan atribut-atribut yang mungkin kurang familiar untuk Anda. Melansir dari website Portal Jawa terdapat beberapa cara yang dapat Anda gunakan untuk membuat button link di html dengan menggunakan tambahan tag saja.
Tag tersebut yakni tag <a href>sama seperti Anda membuat link pada halaman tertentu. Nah, berikut ini contoh penggunaan script atau kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
</head>
<body>
<a herf=https://www.portaljawa.com”><button>Button Dengan Link</button></a>
</body>
</html>
Langkah pertama, silahkah Anda buatlah tag button seperti Anda membuat button seperti biasanya.Kemudian, sebelum tag button, tambahkan tag <a herf> diikuti dengan link website yang ingin Anda tuju saat mengklik button tersebut.ingat! Tag penutupnya </a> harus berada setelah tag </button>. Selain cara diatas, Anda juga bisa membuat button link dengan new tab.
Pada cara pertama, saat button link yang dituju akan terbuka dan tidak berpindah ke tab baru. sehingga jika Anda ingin kembali ke halaman sebelumnya, Anda harus melakukan undo terlebih dahulu. Nah, cara yang kedua ini Anda tidak perlu melakukan undo untuk kembali ke halaman sebelumnya. Sebab, disini Anda akan membuat link button dengan membuka tab baru.
Lantas bagaimana cara membuat link button di html dengan menggunakan new tab? Nah, berikut ini contoh kode dari pembuatan link button dengan menggunakan new tab:
(!DOCTYPE html>
<html>
<head>
<title>Contoh Button Link</title>
</head>
<body>
<a href=”https//www.portaljawa.com” target=”_blank”><button>Button Dengan Link & New Tab</button></a>
</body>
</html>
Pada dasarnya penulisan kode cara ini dengan cara yang pertama tadi sama, yakni menggunakan tah <a herf>. Namun, cara kedua ini ada tambahan atribut yang harus Anda masukkan. Atribut tersebut adalah target=”blank”. Anda tidak boleh lupa menuliskan atribut tersebut. Jika tidak ditulis, Anda akan tetap berada di halaman tersebut.
Melansir dari website Portal Jawa, Anda juga bisa membuat button link dengan menggunakan kode Javascript. Namun sebelum menggunakan cara ini, pastikan terlebih dahulu browser Anda mendukung Javasript. Sebab, jika tidak maka button link Anda tidak akan bekerja sebagaimana mestinya. Setelah Anda sudah memastikan hal tersebut, Anda dapat melihat contoh penggunannya sebagai berikut:
<!DOCTYPE html>
<html>
<title>Contoh Button Link</title>
</head>
<body>
<!– Contoh 1 –>
<button onclick=”window.location.herf=’namafile.html’ ”>Link 1</button>
<br><br>
<!– Contoh 2 –>
<button onclick=”window.location.herf=”https://portaljawa.com’ “>Link 2</button>
</body>
<html>
Dari contoh kode diatas, dapat diketahui dalam membuat button link dengan Javascript, yang harus Anda tambahkan di dalam tag <button> adalah onclick. Terdapat dua perbedaan dari penulisan link di atas. Anda bisa menggunakan penulisan link di contoh pertama jika link yang dituju berada pada situs yang sama. Sedangkan jika link yang dituju berbeda, Anda bisa menggunakan contoh yang kedua.
Selain ketiga cara tersebut, Anda juga bisa membuat button link di html dengan bantaun CSS. Berikut ini contoh script CSS:
<style>
button{
font-family: sans-serif;
font-size: 15px;
background: #22a4cf;
color: white;
border: white 3 px solid;
border-radius: 5px;
padding: 12px 20px;
margin-top: 10 px;
}
button:haver{
opacity:0.9;
}
</style>