Cara Membuat Button Menggunakan CSS3

Banyak sobat blogger yang bertanya bagaimana cara membuat button seperti yang ada di blog saya. Tidak banyak basa-basi langsung saja kita praktekkan Cara Membuat Button Menggunakan CSS3
Berikut cara membuatnya :

Seperti biasa sobat harus login ke Blogger
Klik Rancangan → Edit HTML
Kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).
jika sudah ketemu letakan kode CSS berikut diatas kode ]]></b:skin>

/* button
----------------------------------------------- */
.button{
       background-color:#fff;
       background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc));
       background: -moz-linear-gradient(top, #f3f3f3, #cccccc);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
       color: #940f04;
       color:rgba(0,0,0,0.9);
       border:1px solid rgba(0,0,0,0.5);
       -moz-border-radius:3px;
       -webkit-border-radius:3px;
       -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
       -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
       text-shadow:1px 1px 0px rgba(255,255,255,0.8);
       padding: 3px;
       padding-top:3px;
       padding-bottom:3px;
       margin-right:3px;
}
.button a, .button:hover {
       background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#f3f3f3));
       background: -moz-linear-gradient(top, #cccccc, #f3f3f3);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
       color:#000;
       color:rgba(0,0,0,0.9);
       border:1px solid rgba(0,0,0,0.5);
       -moz-border-radius:3px;
       -webkit-border-radius:3px;
       text-shadow:1px 1px 0px rgba(255,255,255,0.8);
       text-decoration: none;
       padding: 3px;
       padding-top:3px;
       padding-bottom:3px;
       box-shadow: inset 0px 0px 5px #fbc26f;
       -webkit-box-shadow: inset 0px 0px 5px #fbc26f;
       -moz-box-shadow: inset 0px 0px 5px #fbc26f;
}

Keterangan : kode yang berwarna biru bisa sobat ganti sesuai selera
jika sudah selesai SIMPAN TEMPLATE

kemudian untuk mengaplikasikannya sobat tinggal memanggil kode button diatas yaitu dengan cara menambahkan kode class="button"

berikut contohnya :

contoh tidak menggunakan link

<a class="button">Cara Membuat Button Menggunakan CSS3</a>

Hasilnya akan tampak seperti dibawah

Cara Membuat Button Menggunakan CSS3


Dan contoh yang menggunakan link

<a href='http://dinarcool.blogspot.com/2011/07/cara-membuat-button-menggunakan-css3.html'class="button"> Cara Membuat Button Menggunakan CSS3</a>

Hasilnya akan tampak seperti dibawah

Cara Membuat Button Menggunakan CSS3


Selamat mencoba dan semoga berhasil