Membuat button menarik dengan CSS

Bosan dengan tampilan button atau tombol submit setandar pada Website Anda?
Agar lebih menarik bisa gunakan gambar yang di change ketika event mouseOver dan
mouseOut dengan bantuan javascript, dan biasanya cara di atas banyak disediakan pada fiture-
fiture aplikasi Design Web. Tapi kali ini tidak akan membahas itu melainkan akan membuat
tombol sederhana,ringan tapi menarik dengan bantuan CSS.

Artikel ini adalah sebuat trik menggunakan CSS bila Anda belum mengerti dan tidak tau apa itu
CSS silahkan pelajari terlebih dahulu mengenai artikel apa itu CSS.

Di Distribusikan Oleh
www.KampoengTI.com
Oke Kita Langsung Saja!!!
Contoh 1 Tanpa Gambar.
CSS:

TAG HTML

Hasilnya tampak seperti di bawah ini (Browser Opera)

Di Distribusikan Oleh
www.KampoengTI.com
Contoh 2 Dengan Gambar.
Bila Button Anda ingin memiliki gradasi gunakan langkah di bawah ini.
Pada artikel ini image dibuat menggunakan GIMP, bila OS Anda Windows bisa gunakan Adobe
potoshop atau bisa juga download GIMP versi Windows.

Buat document baru dengan ukuran 1x60 pixel, agar mudah mendesignnya gunakan 100x60
pixel terlebih dahulu.

Dengan Height 60 pixel kita bisa dibuat untuk 2 tombol yang masing masing tingginya 30 pixel.
Seperti di bawah ini.

Di Distribusikan Oleh
www.KampoengTI.com
Warna Merah untuk Normal. Hijau Untuk Hover.

Setelah selesai sesuai serera Anda duplikat atau copy ke document baru dengan ukuran 1x60
pixel.

Hasilnya seperti di bawah ini.

Simpan lah dengan nama misalnya button.jpg di direktori folder image/gambar root website
Anda.

Di Distribusikan Oleh
www.KampoengTI.com
Edit CSS di atas menjadi seperti ini

dan hasil pada Opera menjadi seperti berikut :

Bila yang akan di buat button adalah tag INPUT type Submit/Button berikut CSS dan Tag HTML
nya.

Di Distribusikan Oleh
www.KampoengTI.com
TAG HTML

Hasilnya :

Di Distribusikan Oleh
www.KampoengTI.com
Dengan Menggunakan Input Button maka mendukung Event disabled. Anda dapat
menambahkan gambar untuk mode disabled ini sehingga gambar yang tingginya 60pixel
menjadi 90pixel dengan asumsi gambar menjadi 3 buah.
Dan tambahkan CSSnya

Sekian Tips sederhana yang bisa saya berikan menganai button dengan CSS. Berikut sample2
design Lainnya dari contoh di atas.

Normal , Hover

Normal , Hover

Normal , Hover

Normal , Hover, Disabled

Sekarang giliran Anda berkereasi,

Selamat menikmati.

Salam Teknologi

www.KampoengTI.com

Di Distribusikan Oleh
www.KampoengTI.com