Cara menambahkan button di html

Question

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.

Table of Contents Show

1. Button tanpa Link/tautan
2. Button disertai Link
3. Button Tombol Disertai Link dan Membuka Tab Baru Browser
4. Button Berwana
Apa itu button dalam HTML?
Yang mana dari tag HTML ini yang membuat tombol?
Apa itu button dalam website?
Button submit berfungsi untuk apa?

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 –>

<!– Contoh 2 –>

</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:

Seorang blogger biasanya ingin membuat inovasi dan tampilan agar postingannya terlihat menarik. Salah satunya adalah dengan membuat tombol button pada postingan blog. Biasanya sih postingan yang ada button atau tombol seperti itu digunakan untuk memperlihatkan sekaligus memperjelas tombol download. Namun tak hanya itu, tombol atau button juga bisa memberikan tampilan yang menarik.

Nah oleh sebab itu, pada tulisan kali ini saya akan memberikan tutorial sederhana tentang cara membuat button (tombol) link pada postingan blog. Simak, ya.

Ada beberapa macam button pada postingan blog, seperti tombol tanpa link, tombol disertai link dan tombol disertai link dengan membuka tab baru di browser.

Jika anda ingin berinovasi juga bisa dengan cara mengganti background button yang ingin dikustomisasi.

1. Button tanpa Link/tautan

Untuk membuat button tanpa link sangat mudah, berikut adalah kode yang bisa anda tulis di potingan

<button>Button Tanpa Link</button>

Hasil dari kode html di atas adalah sebagai berikut Button Tanpa Link

2. Button disertai Link

Selain tanpa link, button juga bisa diisi dengan tautan yang anda inginkan. Misalnya ingin membuat button dengan tujuan tautan merujuk pada alamat website tertentu. Anda cukup menggunakan kode html di bawah ini

<a href="https://www.qowim.com"><button>Button Dengan Link</button></a>

Keterangan: ganti url yang kalian inginkan dan jika ingin mengganti tulisan Button dengan link silakan diganti saja.

Hasilnya akan seperti ini Button Dengan Link

3. Button Tombol Disertai Link dan Membuka Tab Baru Browser

Jika anda menginginkan button yang berisi link dan membuka otomatis tab baru, maka kode htmlnya adalah sebagai berikut

<a href="https://www.qowim.com" target="_blank"><button>Button Dengan Link & New Tab</button></a>

Keterangan: Ganti url warna orange di atas dengan url yang anda inginkan. Ganti tulisan berwana hijau dengan tulisan yang anda inginkan untuk ditampilan. Hasil dari kode html di atas adalah sebagai berikut

Button Dengan Link & New Tab

Mudah, bukan? Nah sekarang coba kita kustomisasi tombol-tombol tersebut dengan kode html yang sederhana saja.

4. Button Berwana

Selain gaya-gaya standar di atas, anda juga bisa memodifikasi button dengan warna-warna yang anda inginkan. Salin-tempel saja kode di bawah ini

<button onclick="window.location=
'https://www.qowim.com' "style="background-color: #7ae6c9; color: white; height: 35px; width: 150px;">
<b>
Button Link Berwarna</b>
</button>

Keterangan pada tulisan berwarna orange silakan ganti kode-kode tersebut sesuai dengan keinginan anda. Hasilnya akan seperti di bawah ini

Button Link Berwarna

Mudah sekali, bukan?

Penutup

Demikianlah tutorial sederhana tentang cara membuat button atau tombol link pada postingan blog. Semoga ini bermanfaat.

Apa itu button dalam HTML?

Deskripsi. Penjelasan HTML button Button dapat diartikan dengan tombol. HTML element button menunjukkan sebuah tombol yang secara umum memiliki style layaknya sebuah tombol yang dapat diklik untuk menjalankan tindakan tertentu.

Yang mana dari tag HTML ini yang membuat tombol?

Tag <button> Pada HTML. HTML elemen tag <button> merupakan tag pada HTML yang digunakan untuk menciptakan sebuah tombol yang dapat diklik.

Apa itu button dalam website?

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.