Cara Membuat Button Link di HTML (Lengkap+Gambar)

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

Download berbagai jenis aplikasi terbaru, mulai dari aplikasi windows, android, driver dan sistem operasi secara gratis hanya di Nesabamedia.com:

Download Software Windows

Download Aplikasi Android

Download Driver Printer

Download Sistem Operasi