Cara membuat tombol download 3D style di postingan blog

Selamat berjumpa lagi dengan satya22.com, ditutorial kali ini saya akan sedikit menjelaskan tentang:

Bagaimana Caranya Membuat Tombol Download dengan gaya 3D

Bagi mereka yang mempunyai blog khusus download tentunya tidak asing dengan tutorial yang satu ini, mengapa? Karena element yang satu ini berperan penting dalam postingan mereka, dusamping mempercantik tampilan blog, tombol diwnload dengan gaya 3D ini juga bisa untuk menutupin iklan yang terpasang jika di klik.

Baca juga : Cara membuat carousel banner seperti kompi ajaib.

Tanpa harus panjang lebar lagi, dibawah ini adalah script yang akan kita gunakan untuk diletakan kedalam template blog.

Hal pertama yang harus dilakukan adalah meletakan kode CSS yang ada dibawah tepat diatas kode ]]></b:skin> atau </style>, Dengan cara copy code dibawah ini, login ke blogspot, klik template kemudian edit HTML.

<style>
.tombolflat3d {
border-radius:4px;
display:inline-block;
margin:5px;
padding:10px 15px;
font-size:20px;
background:#4689F7;
color:#fff;
text-shadow:0 -2px 0 rgba(0,0,0,0.14);
box-shadow:inset 0 -4px 0 rgba(0,0,0,0.14);
}
.tombolflat3d:hover {
background:#3f83f3;
color:#fff;
box-shadow:inset 0 -3px 0 rgba(0,0,0,0.14);
}
.tombolflat3d:active {
box-shadow:inset 0 -1px 0 rgba(0,0,0,0.14);
}
</style>

Setelah itu klik save.
Yang kedua, copy kode HTML dibawah ini yang nantinya akan diletakan dipostingan blog kalian untuk tombol download.

<a class="tombolflat3d" href="#link">DOWNLOAD</a>

Demikian tutorial membuat tombol download dipostingan blog, Untuk demonya bisa dilihat disini DEMO

Jika ada kekurangan kata saya mohon maaf sebesar-besarnya.
Dan jika berkenan dengan postingan saya, mohon untuk dishare..

Share This Article :