Tips membuat tombol download menggunakan css

Tips membuat tombol download menggunakan css - Dalam membuat sebuah postingan, pastinya kita sering membuat postingan dimana kita menaruh link suatu file, alias link download, tapi umumnya untuk link download ini kita harus mengedit atau mendesai link tersebut supaya terkesan menarik dan ada orang yang mau mengklik-nya.

Akan tetapi untuk pemula memang membuat link download dengan sedikit modifikasi css agar rumit, nah untuk itu disini saya lampirkan kode css yang mana bisa sobat copy dan langsung bisa digunakan, berikut ini caranya :

Script CSS

.tombolhijau { color: #fff; padding: 8px 14px 10px; background-color: #67b600; border: none; margin-right: 25px; position: relative;;
-webkit-user-select: none;
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px; border-radius: 3px;
-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
.tombolhijau:active { position: relative; top: 3px;
-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}
.tombolhijau:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }

Demo

Download Dimari


Perhatian : Untuk memanggil kode css ini, pastikan link yang sobat gunakan harus di tambahkan kode class="tombolhijau" . contohnya seperti ini : <a class="tombolhijau" href="http://v-datoe.blogspot.com/" rel="nofollow">Download Dimari</a>

Nah, gimana ? apa sobat paham, saya rasa paham yah . soalnya cara ini sangat familiar sekali bagi kalangan blogger seperti sobat-sobat ini. okelah sekiranya itulah Tips membuat tombol download menggunakan css yang saya posting kali ini, semoga bermanfaat.