CSS3 | Create Beautiful Button

Kali ini, saya akan membagi artikel mengenai CSS3 lagi. Ya dikarenakan kurang adanya inspirasi baru, sehingga saya mohon artikel ini diterima sajalah..
CSS3 adalah salah satu bentuk CSS yang paling baru saat ini yang mana sangat banyak rahasia rahasia CSS3 yang belum kita ketahui. Nah, disini saya akan berusaha untuk membongkar semua rahasia itu, yang tentu saja bertahap.
Oke, Sebagai contoh, coba lihat gambar berikut

Nah, yang saya lingkari itulah yang saya sebut sebagai Beautiful Button dengan menggunakan CSS3.
Mau membuatnya? Silahkan ikuti langkah di bawah ini:
1. Login ke blog anda --> Design --> Edit HTML
2. Masukkan kode CSS ini di atas kode ]]></b:skin>.

 .button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button a {
color: black;
text-decoration: none;
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

***NOTE: 

Anda bisa mengedit kode CSS di atas sesuai dengan kemauan anda jikalau memang anda mengerti CSS.
Dan untuk kode HTMLnya
orange:hover ==> Apa yang terjadi jika pointer didekatkan
orange:active ==> Apa yang Terjadi jika diklik

3. Nah, sekarang beralih untuk membuat HTMLnya.. Berikut adalah tata caranya

<a href="#" class="button orange">Button</a>
<a href="#" class="button orange">Button</a>
<a href="#" class="button orange">Button</a>
<a href="#" class="button orange">Button</a>

*Silahkan ganti tanda '#' dengan url... dan 'Button' dengan Titlenya...
4. Save
5. Untuk demo, silahkan lihat link di bawah ini.

Kukuhcdh | Demo | CSS3 | Create Beautiful Button

Nah, sekarang silahkan beri komentar dan like serta sharenya :)...

Tweet

Artikel Terkait: