Entah kenapa akhir-akhir ini saya suka mengutak-atik dan mendalami CSS3, Ajax dan JQuery. Saya masih penasaran dan mencoba untuk menciptakan sebuah inovasi baru.

Disini saya mencoba untuk membuat button menarik menggunakan fitur dari CSS3 tanpa menggunakan image. Sehingga dapat mengirit load page kita. Pada awalnya saya hanya ingin membuat button warna biru saja. tapi secara tidak sengaja, adahal serupa di ZURBlog. Dan saya mendapatkan bemacam-macam warna disana.

Kita akan menerapkan Border-Radius, Box-Shadow, dan Text-Shadow. Jika CSS3 mendukung warna gradien sebenarnya dapat kita gunakan. Sayangnya belum ada dan semoga aja ada di versi selanjutnya. Jika anda ingin Button kelihatan lebih menarik anda dapat menambahkan background image sebagai gradientya.

Button Dasar

kita membuat style untuk pembuatan button terlebih dahulu.

.buttoncss3 {
  background: #222;
  display: inline-block;
  padding: 5px 10px 6px;
  color: #fff;
  text-decoration: none;
  ext-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer; 
  font-size: 13px; 
  font-weight: bold; 
  line-height: 1; 
  margin: 5px;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);}

<a class="buttoncss">Go to Replace ID»</a>

Hasilnya kira-kira seperti ini

Go to Replace ID»

Warna Button

Agar kita mempunyai banyak pilihan warna. Anda dapat menggunakan css dibawah ini. Dan anda dapat menambahkan berbagai warna yang anda kehendaki.

.green.buttoncss3  { background-color: #91bd09; }
.blue.buttoncss3   { background-color: #2daebf; }
.red.buttoncss3    { background-color: #CC0000; }
.magenta.buttoncss3{ background-color: #a9014b; }			
.orange.buttoncss3 { background-color: #ff5c00; }			
.yellow.buttoncss3 { background-color: #ffb515; }
.purple.buttoncss3 { background-color: #663399; }			

dan tulis pada halaman html anda seperti ini.

<a class="green buttoncss3">Go to Replace ID»</a>
<a class="blue buttoncss3">Go to Replace ID»</a>
<a class="red buttoncss3">Go to Replace ID»</a>
<a class="magenta buttoncss3">Go to Replace ID»</a>
<a class="yellow buttoncss3">Go to Replace ID»</a>
<a class="orange buttoncss3">Go to Replace ID»</a>
<a class="buttoncss3">Go to Replace ID»</a>
<a class="purple buttoncss3">Go to Replace ID»</a>
<a class="buttoncss3">Go to Replace ID»</a>

Hasilnya kira-kira seperti ini

Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID»

Efek Animasi Button

Button yang telah kita buat memang sudah bagus (hehehe PD). Tetapi kurang sedikit polesan.
Seperti warna berubah pada saat mouse di sorotkan ke button atau efek ditekan oleh kursor.

Kita perlu menambahkan beberapa style dibawah ini.

.yellow.buttoncss3:hover   { background-color: #fc9200; }
.green.buttoncss3:hover	   { background-color: #749a02; }	
.blue.buttoncss3:hover	    { background-color: #007d9a; }
.red.buttoncss3:hover	    { background-color: #872300; }
.magenta.buttoncss3e:hover	{ background-color: #630030; }
.orange.buttoncss3:hover	{ background-color: #d45500; }
.purple.buttoncss3:hover { background-color: #330033; }
.buttoncss3:hover		    { background-color: #A1A1A1; color: #fff; }
.buttoncss3:active		    { top: 1px;} 
/*efek tekanan pada saat di-klik*/

Hasilnya kira-kira seperti ini

Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID»

Selamat mencoba semoge bermanfaat. Untuk lebih mudah menyusun skrip, anda dapat melihat demo dibawah ini.