+++ cara membuat tombol button menggunakan CSS3 Di Blogger+++

Tutorial Belajar Blog - Cara Memasang CSS3 Buttons Untuk Blogger, Tutorial Belajar Blog Kali Ini  Mau berbagi Tetang Beberapa Tombol Menarik Dengan CSS3, Mau Lihat Demonya ? Demo

Gimana ? Menarikkan, Tombol Ini Ada Beberapa Macam, Ada Download, Play, Like, dll .CSS3 Buttons Untuk 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='#eeeeee', 

EndColorStr='#cccccc');  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='#fafafa', 

EndColorStr='#dddddd');         } .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"   href="#">Add</a>
<a class="button delete"href="#">Delete</a>
<a class="button edit"  href="#">Edit</a>
<a class="button save"  href="#">Save</a>
<a class="button email" href="#">Email</a>
<a class="button like"  href="#">Like</a>
<a class="button next"  href="#">Next</a>
<a class="button spark" href="#">Spark</a>
<a class="button play"  href="#">Play</a>

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

Keterangan HTML Pemanggil

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

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

<a class="button save"  href="URL Tujuan">Download</a>

Semoga Bermanfaat