Tombol dalam sebuah postingan blog sangat diperlukan guna mengarahkan link baik itu untuk tujuan mengarahkan ke halaman lain ataupun digunakan untuk tombol sebagai link download, namun demikian acapkali kita lebih sering menggunakan tombol image atau gambar dimana terdapat banyak variasi dan model yang bisa kita gunakan, namun syangnya hal tersebut sedikit berpengaruh terhadap kecepatan blog, dimana untuk Serp Engine Optimation dibutuhkan blog yang fast way, atau blog yang tidak lambat, namun untuk beberapa blog mereka tetap menggunakan tombol dengan image berformat Jpeg, Gif, PNG, dan lain-lain, namun biasanya hal tersebut diakali dengan menggunakan Lazyload for image.
Disini penulis bukannya tidak menyukai tombol dalam postingan menggunakan gambar, namun untuk mengurangi loading blog penulis lebih cenderung menggunakan tombol dengan script html pada postingan blog, dan tentu kita bisa memodifikasi sedikit mengenai tampilan.
Berikut beberpa script tombol yang bisa diterapkan dalam postingan blog. :
Tombol 1
Script :
<a href="#"><button type="submit">DOWNLOAD</button></a>
Tombol 2
Script :
<button onclick="window.location='#' " style="background-color: #7ae6c9; color: white; height: 25px; width: 100px;"><b>DOWNLOAD</b></button>
Tombol 3
Script :
<button style="-webkit-appearance: none; appearance: none; background: darkblue; border-color: rgb(255, 255, 255); border-radius: 13px; border-style: solid; border-width: 0.5px; box-shadow: rgb(153, 153, 153) 0px 9px; cursor: pointer; font-size: 18px; line-height: 22px; margin: 0px; min-width: 90px; padding: 8px; transition: all 0.2s ease-in-out 0s; vertical-align: baseline; width: auto;"><a href="#"><span style="color: white;"><b>DOWNLOAD</b></span></a></button>
Tombol 4
Script :
Contoh Script tombol diatas tombol link mengarah ke halaman sama karena tidak dipasang target="_blank", sedangkan contoh dibawah ini untuk contoh tombol link mengarah ke halaman lain atau disebut target tidak ditentukan sehingga membuka tab baru untuk membuka halaman.
Tombol T-Blank 1
Script :
<a href="/" target="_blank"><button style="background-color: silver; color: darkred; height: 50px; width: 75px;"><b>Download</b></button></a>
Ket :
Tombol T-Blank 1 membuka hanya 1 halaman
sedangkan pada Tombol T-Blank 2 dibawah membuka 2 halaman baru sekaligus,..
Tombol T-Blank 2
Script :
<a href="#" onclick="window.open('#')" target="_blank"> <button style="background-color: silver; color: darkred; height: 50px; width: 75px;"><b>Download</b></button></a>
Demikian semoga dapat bermanfaat