Cara Membuat Button Menggunakan CSS3

Banyak sobat blogger yang bertanya bagaimana cara membuat button seperti yang ada di blog saya.
Sebenarnya saya sudah pernah mempostingkan cara tersebut di (www.imtikhan.co.cc) tapi blog tersebut sudah di hapus oleh blogger sejak 23 September kemarin.
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://tiptrikblogger.blogspot.com/2010/12/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