Simple Fancy Button dengan CSS3

banyak yang bertanya tanya gimana sih bikin tombol gradiasi yang baguuss !!
seperti twitter??
itu mudah cuma siapkan mental saja yang kuat hehe. dan sedikit CSS3

untuk kali ini saya sarankan menggunakan browser modern ex : Chrome, Safari, Firefox yang pastinya sudah support CSS3

pertama kita perlukan gradiasinya gmana cara membuat tombol dengan gradiasi css3 agar bagus ?
pastikan warna gradiasi bawah dan atas itu bawah gelap atas terang
Untuk generate CSS3 Gradient bisa pake tools http://www.colorzilla.com/gradient-editor/

berarti kode yang kita dapatkan sebagai berikut.

background: #4f85bb;
background: -moz-linear-gradient(top, #4f85bb 0%, #416b99 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f85bb), color-stop(100%,#416b99));
background: -webkit-linear-gradient(top, #4f85bb 0%,#416b99 100%);
background: -o-linear-gradient(top, #4f85bb 0%,#416b99 100%);

sedangkan untuk CSS tombol bisa menggunakan kode ini.

input[type="button"]{
background: #4f85bb;
background: -moz-linear-gradient(top, #4f85bb 0%, #416b99 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f85bb), color-stop(100%,#416b99));
background: -webkit-linear-gradient(top, #4f85bb 0%,#416b99 100%);
background: -o-linear-gradient(top, #4f85bb 0%,#416b99 100%);
border: 1px solid transparent;
color: white;
font-family: arial;
font-weight: bold;
padding: 3px 10px;
border-radius: 5px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 3px rgba(0,0,0,0.8);
}

Untuk gradiasi kamu bisa copy dari generate code CSS yang tadi. untuk membuat Teks terlihat membekas ke dalam menggunakan akal akalan CSS text shadow seperti kode di atas dan biasa tag untuk tombol

<input type="button" value="tombol"/>

maka hasilnya akan seperti ini.