Membuat button dengan css3 pastinya keren banget, apa lagi anda yang blogX bertema blue - blue gitu cocok nih warnanya hehehe dengan di tambahkan Efek Transition maka pergantian warnanya akan semakin / terlihat lebih lembut, itulah gunanya css Transition memperlembut gerakan, Anda penasaran . .? sialhkan lihat demonya
DEMO
Silahkan sentuh button. gimana bagus gak menurut anda. .? jika ingin menggunakannya kodenya di bawah ini tinggal tambah di postingan atau tambah di dalam HTML/Javascript
<a class="button" href="#">BUTTON CSS3 2</a>Tapi sebelumnya simpan kode di bawah ini di atas kode
]]></b:skin> ( di dalam template anda ).button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e779d), color-stop(1, #65a9d7));
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3e779d, EndColorStr=#65a9d7)";
background: linear-gradient(top, #3e779d, #65a9d7);
padding: 10.5px 21px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
-moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
color: white;
font-size: 20px;
font-family: "Arial", sans-serif;
text-decoration: none;
vertical-align: middle;
margin: 5px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out
}
.button:hover {
border-top-color: #000;
background: #f00;
color: #000;
text-decoration: none
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
text-decoration: none
}
Jangan lupa ganti tanda pagar
# dengan URL anda.
