CSS3 Buttons For Blogger

CSS3 Buttons For Blogger - CSS3 Buttons For Blogger, Oke Sobat Kali Ini Saya Mau Share Beberapa Tombol Menarik Dengan CSS3, Mau Lihat Demonya ? Demo
Gimana ? Menarikkan, Tombol Ini Ada Beberapa Macam, Ada Download, Play, Like, dll
CSS3 Buttons For Blogger Bisa Digunakan Untuk Tombol Download Dan Lain-Lain

Berikut Tutorialnya :

• Login Blogger
• Klik Template
• Edit HTML
• Centang Expand Template Widget
• Cari Kode Ini  ]]></b:skin>
• Copy Kode Dibawah, Lalu Paste Diatas  ]]></b:skin>

.button { display: inline-block; white-space: nowrap; background-color: ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(eee), to(ccc)); background-image: -webkit-linear-gradient(top, eee, ccc); background-image: -moz-linear-gradient(top, eee, ccc); background-image: -ms-linear-gradient(top, eee, ccc); background-image: -o-linear-gradient(top, eee, ccc); background-image: linear-gradient(top, eee, ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&39;eeeeee&39;, EndColorStr=&39;cccccc&39;); border: 1px solid 777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: 333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover { background-color: ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(fafafa), to(ddd)); background-image: -webkit-linear-gradient(top, fafafa, ddd); background-image: -moz-linear-gradient(top, fafafa, ddd); background-image: -ms-linear-gradient(top, fafafa, ddd); background-image: -o-linear-gradient(top, fafafa, ddd); background-image: linear-gradient(top, fafafa, ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&39;fafafa&39;, EndColorStr=&39;dddddd&39;); } .button:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .button:focus { outline: 0; background: fafafa; }.button:before { background: ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; pointer-events: none; } /* Hexadecimal entities for the icons */ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before { content: "\2718"; } .save:before { content: "\2714"; } .email:before { content: "\2709"; } .like:before { content: "\2764"; } .next:before { content: "\279C"; } .star:before { content: "\2605"; } .spark:before { content: "\2737"; } .play:before { content: "\25B6"; }

• Simpan Template

Sekarang Kode HTML Pemanggilnya (Pilih Salah Satu)

<a class="button add"   target="_blank" rel="nofollow" href="">Add</a>
<a class="button delete"target="_blank" rel="nofollow" href="">Delete</a>
<a class="button edit"  target="_blank" rel="nofollow" href="">Edit</a>
<a class="button save"  target="_blank" rel="nofollow" href="">Save</a>
<a class="button email" target="_blank" rel="nofollow" href="">Email</a>
<a class="button like"  target="_blank" rel="nofollow" href="">Like</a>
<a class="button next"  target="_blank" rel="nofollow" href="">Next</a>
<a class="button spark" target="_blank" rel="nofollow" href="">Spark</a>
<a class="button play"  target="_blank" rel="nofollow" href="">Play</a>

Kode Itu Silahkan Ditaruh Di HTML, Baik Itu Postingan / Gadget

Keterangan HTML Pemanggil

• <a class="button add"   target="_blank" rel="nofollow" href="">Add</a> : Tombol Add
• <a class="button delete"target="_blank" rel="nofollow" href="">Delete</a> : Tombol Delete
• <a class="button edit"  target="_blank" rel="nofollow" href="">Edit</a> : Tombol Edit
• <a class="button save"  target="_blank" rel="nofollow" href="">Save</a> : Tombol Save
• <a class="button email" target="_blank" rel="nofollow" href="">Email</a> : Tombol Email
• <a class="button like"  target="_blank" rel="nofollow" href="">Like</a> : Tombol Like
• <a class="button next"  target="_blank" rel="nofollow" href="">Next</a> : Tombol Next
• <a class="button spark" target="_blank" rel="nofollow" href="">Spark</a> : Tombol Spark
• <a class="button play"  target="_blank" rel="nofollow" href="">Play</a> : Tombol Play

Contoh :
Juka Sobat Ingin Menggunakan Tombol Download Maka Begini Pemanglannya HTML

<a class="button save"  target="_blank" rel="nofollow" href="URL Tujuan">Download</a>
Semoga Bermanfaat