Variasi Seputar Tagging Button

Sobat pasti sudah kenal dengan atribut button. Button/tombol biasanya selalu kita jumpai di form action variable. Secara garis besar button dikelompokan menjadi 3 jenis. <button type="button|submit|reset"> Atrribute yg bisa kita pakai meliputi disabled, name, type dan value. Syntax HTML ditulis begini <button> . . . </button> Isikan di tengah dengan title, maka akan menjadi Kalau divariasikan dengan teknik CSS-inline, sobat bisa membuat tombol lebih full stylish ;)

Keterangan singkat bisa dibaca HTML <button> Tag Apakah pernah mencoba dari kalian membubuhi att. button ini dengan sebuah image! Memang tidak sering kita jumpai pemakaian syntax button di dalam postingan. Namun apa salahnya setelah membaca artikel ini nanti kalian akan jadi familiar menggunakannya yah :D
Mari kita mulai bereksperimen ria dengan dipadu kode CSS agar lebih terlihat ngejreng :P.butt {
padding: 3px;
text-align: left;
font: 13px Verdana, Arial, sans-serif;
}Koben membuat coded CSS standar untuk button. Kalau panjang kodenya nanti pusing, jadi terserah deh kalian mau menambahkan apa disana. Yang terpenting jangan salah menyimpan kode CSS itu tepat diatas tag ]]></b:skin> Menyisipkan gambar yaaa di tengah² penulisan syntax button!
Like this:

Image pakai resolusi yg 16x16 px saja. Bayangkan ada berapa image pada windows! Hohoho...kalian bisa buat apa saja terserah :))

<button class="butt">
<img src="http://link-your-image-here.png" width="16" height="16" alt="" /> TITLE
</button>

Sudah membaca postingan sebelumnya tentang javascript untuk menyembunyikan konten? Koben punya satu lagi yg mirip dengan itu. Tetapi kalau ini apabila sudah dimunculkan yg tersembunyinya, tidak akan bisa di tutup lagi :D
Letakkan JavaScript berikut diatas tagging </head> atau </body>

<script type='text/javascript'>
function unhide(bbn) {
  bbn.style.display = "none";
  bbn.nextSibling.style.display = "block";
}
</script>

Syntax HTML atau cara pemakaian...<button onclick="unhide(this)" class="butt">TITLE</button><div style='display:none'>

KONTEN YANG DISEMBUNYIIN

</div>Kreatifitaskan sesuai kreasi kalian deh tuh yah ;;) Good luck.
Happy coding \m/