Sedikit mengenal CSS3, kali ini kita kupas tentang macam-macam button css3.
ditambah sedikit fungsi hover agar terkesan lebih menarik.
mari kita liahat contoh-contohnya :


Untuk menerapkan pada blog kita, sebenarnya cukup dengan 2 cara..
Yaitu :

LANGKAH 1
Masukan kode CSS dibawah ini pada Rancangan Edit HTML blog sobat,
tepatnya diatas 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: .6em 2em .6em;
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:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.besar { font-size:16px; }
.kecil { font-size:9px; }
.lonjong { -webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em; }
.persegi { -webkit-border-radius: .0em;
-moz-border-radius: .0em;
border-radius: .0em; }
.kotak { padding: 2.5em 2em 2.5em; }
.bulat { -webkit-border-radius: 4em;
-moz-border-radius: 4em;
border-radius: 4em; 
padding: 2.5em 1.8em 2.5em; }
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f7941d;
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');
}

Save template, lalu berlanjut ke langkah selanjutnya.


LANGKAH 2
Jika ingin menampilkan didalam postingan, maka masukan kode pemanggil Button dibawah ini,
dan masukan ke halaman posting dengan mode Edit HTML.
tapi jika ingin menampilkan nya di sidebar, maka pilihlah add gadget HTML/Java Script untuk memasukan
kode pemanggilnya.

dan inilah kode pemanggil Button tersebut :
Untuk Button jenis Besar

<a href="#" class="button orange besar">Besar</a>

Untuk Button jenis Sedang

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

Untuk Button jenis Kecil

<a href="#" class="button orange kecil">Kecil</a>

Untuk Button jenis Kotak

<a href="#" class="button orange kotak">Kotak</a>

Untuk Button jenis Bulat

<a href="#" class="button orange bulat">Bulat</a>

Untuk Button jenis Lonjong

<a href="#" class="button orange lonjong">Lonjong</a>

Untuk Button jenis Persegi Panjang

<a href="#" class="button orange persegi">Persegi Panjang</a>

Ganti kode yang berwarna merah dengan URL link yang sobat tuju.


Tergantung semua selera sobat ingin memakai jenis button apa..
kalo mau digunakan semua jenisnya pun, monggo..
tidak ada larangan. bahkan kalo sobat sudah mengerti CSS,
tinggal sobat rubah saja warna or bentuknya, sesuai dengan selera sobat.

Untuk mengetahui jenis Button,
Silahkan lihat demonya
terlebih dahulu.

Ok, jika langkah-langkah diatas sudah dijalankan sesuai aturan,
maka setelah itu, lihatlah hasil nya..
menarik bukan ??

cukup sekian dari ane..
semoga bermanfaat..