Cara Membuat Tombol Button Link di Postingan Blog

Saiful Huda

December 17, 2022

Update:April 07, 2024

cara membuat tombol button di postingan blog

Saiful Huda - Bagi seorang blogger pemula yang belum tahu cara membuat tombol button link di html postingan blog kali ini saya akan membagikan tutorialnya. Tombol button tersebut bisa modifikasi tampilannya agar lebih menarik untuk di klik dan cocok pada postingan yang di bahas pada blog Anda.

Tombol button link biasa digunakan untuk menautkan hyperlink menuju postingan blog laiinnya. Mungkin Anda pernah berkunjung ke blog yang membahas tentang review produk dan terdapat tombol button, apabila di klik tombol tersebut menuju ke postingan produk toko online tertentu.

Kegunaan tombol button link masih banyak, misalnya untuk tombol download, demo, submit, dan lain-lain. Anda bisa memodifikasi nama, warna, ukuran dan bentuk sesuai keinginan sendiri. Untuk cara buat tombol button dengan memahami HTML dan CSS button link yang tidak terlalu rumit.

Untuk pengguna blogger.com membuat button link harus tahu sedikit script css yang diperlukan sebab cara buat tombol button harus di mode tampilan HTML. Berbeda pengguna wordpress yang memiliki hosting sendiri, dia dapat memasang plugin khusus meskipun masih bisa mengunakan satu cara ini.

Cara Membuat Tombol Button di Postingan Blog

Masuk ke Postingan Blog >> Pilih Tampilan HTML
Salin Script HTML dan Css Tombol Button Link
Tempel Script tersebut di Postingan Blog

Saya mulai dari pengertian cara buat tombol button tanpa link pada postingan blog yang akan di letakan tombol, kode html button yakni <button> dan penutupnya </button>. Begini contoh penulisan dan gambar :

<button>CONTOH TOMBOL</button>

Anda bisa menyalin kode siatas dan tempel pada postingan blog di Tampilan HTML, hasilnya seperti :

Nama tombol "CONTOH TOMBOL" dapat Anda ubah sesuai kebutuhan. Tambahan cara agar tampilan button bisa berada di tengah artikel blog bisa meanambah kode awal <center> dan akhir </center> di tengah kode script button blog. penulisan : <center><button>CONTOH TOMBOL</button></center>.

1. Tombol Button Link

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

Hasilnya bisa Anda klik di bawah ini.

2. Tombol Button Link dengan New Tab

<a href="https://www.kucingganteng.com" target="_blank"><button>Open a Link in a New Tab</button></a>

Membuat tombol button link dengan new tab Anda cukup menambah attribute target="_blank" di dalam kode a href seperti diatas. Hasilnya bisa Anda klik pada demo dibawah ini.

3. Tombol Button Link dengan HTML rel Attribute

<a href="https://amzn.to/3SNPcnN" rel="sponsored" target="_blank"><button><b>CHECK PRICE</b></button></a>

Sedangkan cara buat tombol button link dengan rel attribute juga sama cukup menambah rel attribute di bagian kode a href. Adapun rel attribute seperti rel=”nofollow”, rel=”sponsored”, rel=”noopener”, rel=”noreferrer”, rel=”usg” dan html rel attribute lainnya.

Untuk hasilnya bisa cek di bawah ini.

4. Tombol Button Link Berwarna yang Simple

<a href="#" style="background-color: #2d7bbf; color: white; margin: 0px; padding: 10px 20px; text-decoration-line: none;" target="_blank">BUTTON LINK SIMPLE</a>

Anda bisa lihat hasilnya seperti ini.

BUTTON LINK SIMPLE

Pada tombol button link berwarna simple ini Anda hanya perlu menganti kode background-color dan color sesuikan saja dengan warna yang ingin kamu pakai misalnya black, white, red, pink atau bentuk kode hex/rgb dari kode warna html & css.

5. Tombol Button Link dengan kode Css

Kode Tombol Button Link HTML

<a href="https://amzn.to/3SNPcnN" rel="sponsored" target="_blank"><button class="btn"><b>TOMBOL BUTTON LINK</b></button></a>

Pertama kode diatas sebagai tombol button link yang Anda bisa letakkan dimana pun dalam postingan blog. Kuncinya disini adalah nama class yakni "btn" sebagai pemanggil css dibawah yang saya beri nama kode tombol button link css atau kode kedua. Kode ini bisa lebih dari satu dalam postingan blog.

Kode Tombol Button Link Css

<style>
.btn {
background-color: #FF8C00;
border-radius: 9999px;
border: 0.5px;
border-style: solid;
box-shadow: rgb(153, 153, 153) 0px 9px;
box-sizing: border-box;
color: white;
cursor: pointer;
display: inline-block;
font-size: 14px;
line-height: inherit;
margin: 0px;
padding: 10px 20px;
text-align: center;
text-decoration-line: none;
transition: all 0s ease-in-out 0s;
word-break: break-word;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #FFA500;
}
</style>

Kedua kode css ini berfungsi memberi tampilan yang menarik untuk tombol button. Kode tombol button link css ini bisa dimodifikasi tampilannya sesuai keinginan Anda. Letakan kode script di bawah postingan atau dalam edit tema HTML juga bisa dan sudah cukup satu script saja.

Hasilnya seperti ini.

Demikianlah cara membuat tombol button link di postingan blog yang simple. SaifulHuda.com memberikan penjelasan sesuai pengalaman dan kode tombol button link tersebut juga telah dipakai untuk postingan blog ini. Penjelasan yang telah saya berikan kurang jelasnya seperti diatas

Apabila ada yang mungkin belum Anda pahami dari penjabaran cara membuat tombol button di postingan blog tersebut. Silahkan bertanya di dalam kolom komentar yang ada di bawah ini yaa. Terimakasih telah berkunjung dan membaca tutorial tombol button link. Selamat mencoba!