Melanjutkan postingan sebelum-sebelumnya tentang Button Shapes CSS3, kali ini kita bahas tentang macam button CSS3 yg lain nya yaitu Button Gradient CSS3. sama halnya dengan Button Shapes CSS3 baik itu dari penerapan kode CSS nya maupun dari kode pemanggil dalam postingan ataupun dalam sidebar, hanya saja ada ada sedikit dibedakan dalam kode pemanggilnya. seperti apa Button Gradient CSS3, silahkan lihat dulu bentuknya.

Demo Button Gradient CSS3Klik disini untuk melihat demo Button Gradient CSS3

Ada sedikit yg berbeda di Button Gradient ini dibanding dari Button Shapes sebelumnya, seperti nama nya, maka tampilan nya pun berupa mode color Gradient, ditambah effect hover yg membuat pesona button nya lebih menarik.

Bagi yang sudah menerapkan Button CSS3 ini sebelumnya, maka :

LANGKAH 1
Tambahkan kode css dibawah ini tepat dibawah kode css sebelumnya atau diatas kode ]]></b:skin> pada halaman Rancangan - Edit HTML blog sobat.

.purple {
color: #ffffff;
border: solid 1px #8560a8;
background: #8560a8;
background: -webkit-gradient(linear, left top, left bottom, from(#b6a3c8), to(#8560a8));
background: -moz-linear-gradient(top,  #b6a3c8,  #8560a8);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b6a3c8', endColorstr='#8560a8');
}
.purple:hover {
background: #633d87;
background: -webkit-gradient(linear, left top, left bottom, from(#9f8fae), to(#633d87));
background: -moz-linear-gradient(top,  #9f8fae,  #633d87);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9f8fae', endColorstr='#633d87');
}
.purple:active {
color: #e6e6e6;
background: -webkit-gradient(linear, left top, left bottom, from(#8560a8), to(#b6a3c8));
background: -moz-linear-gradient(top,  #8560a8,  #b6a3c8);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8560a8', endColorstr='#b6a3c8');
}

Bagi yang belum pernah memakai nya, maka sebelumnya perhatikan dan pelajari terlebih dahulu postingan ane sebelumnya tentang Button Css disini.


LANGKAH 2
Kode dibawah ini adalah kode pemanggil untuk Button Gradient CSS3 diatas, terserah selera sobat ingin memakai jenis button gradient yg seperti apa, tinggal masukan kode pemanggil untuk jenis button gradient yang bersangkutan pada mode Edit HTML postingan sobat ataupun pada sidebar sobat.

Untuk Button Gradient jenis Besar 
<a href="#" class="button purple besar">Besar</a>
Untuk Button Gradient jenis Sedang 
<a href="#" class="button purple">Sedang</a>
Untuk Button Gradient jenis Kecil 
<a href="#" class="button purple kecil">Kecil</a>
Untuk Button Gradient jenis Kotak 
<a href="#" class="button purple kotak">Kotak</a>
Untuk Button Gradient jenis Bulat 
<a href="#" class="button purple bulat">Bulat</a>
Untuk Button Gradient jenis Lonjong 
<a href="#" class="button purple lonjong">Lonjong</a>
Untuk Button Gradient jenis Persegi Panjang 
<a href="#" class="button purple persegi">Persegi Panjang</a>

Ganti kode yang berwarna merah dengan URL Link yang sobat tuju, juga perhatikan pada kode purple, inilah kata kunci dari kode pemanggil button gradient tersebut.

Untuk mengetahui jenis-jenis Button Gradient, terlebih dahulu lihat Demo nya.

Selesai lah untuk Button Gradient CSS3 kali ini, Personally I dont think this is the right way to do it, if you have better ideas to develop it, please comment !! Selamat mencoba dan semoga bermanfaat.