Tips Customize Submit & Preview button

Maksudnya "Customized submit & preview botton" adalah memberikan tampilan lain untuk tombol :

dan di Guestbook

Serta :

dan di box-reply

Mari kita coba costomize tampilan masing-masing.

Petama, mari kita telaah * wedew * bersama deklarasi CSS untuk seting tombol-tombol tersebut.
Selector untuk tombol Submit dan Submit (Ctrl+Enter) adalah input.submit
Sedangkan Preview dan Preview & Spell Check adalah input#preview_spellcheck_btn

Dengan demikian, apabila saya ingin merubah warna tulisan beserta background-nya menjadi seperti gambar di bawah ini :


Block CSS nya akan seperti berikut ini :

input.submit {
background: #000000 none 0 0 scroll no-repeat;
color: #FFFFFF;
padding: 4px;
}

input#preview_spellcheck_btn {
background: #000000 none 0 0 scroll no-repeat;
color: #FFFFFF;
padding: 4px;
}

Apabila saya ingin menambahkan backbround pada tombol, seperti berikut ini :


Maka saya akan menambahkan property untuk background dan penebalan font ( jika tidak ditebalkan, akan sedikit sulit dibaca ) :

input.submit {
background: transparent url(http://img7.imageshack.us/img7/97/benderarinm3.gif) center center scroll no-repeat;
color: #000000;
padding: 4px;
}

input#preview_spellcheck_btn {
background: transparent url(http://img7.imageshack.us/img7/97/benderarinm3.gif) center center scroll no-repeat;
color: #000000;
padding: 4px;
}

Dan apabila saya akan memberikan icon yang berbeda kepada dua tombol tersebut, seperti tampilan berikut ini, yang menurut saya lebih kelihatan profesional * halah *


Kodenya :

input.submit {
background: #DEDEDE url(http://images.multiply.com/common/misc/indicator-small.gif) 6px center scroll no-repeat;
padding: 4px 4px 4px 22px;
}

input#preview_spellcheck_btn {
background: #DEDEDE url(http://images.multiply.com/multiply/icons/clean/16x16/smiley.gif) 6px center scroll no-repeat;
padding: 4px 4px 4px 22px;
}

Note : Semua URL gambar, bisa Anda ganti dengan alamat URL gambar sesuai selera Anda.

Tambahan.
Ada satu button lagi, pasangan dari kedua button di atas, yaitu tombol Cancel yang muncul saat kita me-reply comment.


Untuk tombol terakhir, "Cancel Reply" selector-nya adalah input#cancel_reply_btn


Block CSS-nya adalah :

input#cancel_reply_btn {
background:#DEDEDE url(http://images.multiply.com/multiply/icons/clean/16x16/x.png) 6px center scroll no-repeat;
padding: 4px 4px 4px 22px;
}

Semoga bermanfaat.
Enjoy.