Blog Ping

Kamis, 11 November 2010

Macam macam button

Setelah menulis Macam macam border1 dan Macam macam border 2 saya akan menulis Macam macam button.
Button adalah tombol.Mw jelasin apa ya??? :)
Kegunaan button ada banyak seperti tombol download,follow,submit,spoiler dll.
Berikut Macam macam button:


-Button biasa
Hasilnya:


Cara menggunakan:
<button type="button">Tombol atau button</button>
-Button seperti google
Hasilnya:


Cara menggunakan:
<span class="lsbb"><input onclick="this.checked=1" class="lsb" value="Google Search" name="btnG" type="submit"></span>
<style>.lsbb{background:#eee;border:solid 1px;border-color:#ccc #999 #999 #ccc;height:30px;display:block}.lsb{background:url(/images/srpr/nav_logo14.png) bottom;font:15px arial,sans-serif;border:none;color:#000;cursor:pointer;height:30px;margin:0;outline:0;vertical-align:top}.lsb:active{background:#ccc}.lst:focus{outline:none}.ds{display:-moz-inline-box}.ds{border-bottom:solid 1px #e7e7e7;border-right:solid 1px #e7e7e7;display:inline-block;margin:3px 0 4px;margin-left:4px}</style>
-Button Download
Hasilnya:
Download here Pictures, Images and Photos


Cara menggunakan:
<a href="alamat download" target="_blank"><img alt="Download here Pictures, Images and Photos" border="0" src="http://i233.photobucket.com/albums/ee5/jun23flrs/btndwn01.gif" /></a>
-Cara membuat Button:
Pada dasarnya button seperti
-->Button biasa

Tapi anda juga bisa mempercantiknya seperti ini:

Code:
<button type="button" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: black; background-image: none; background-position: 0% 0%; background-repeat: repeat; color: white; font: bold 20px Verdana,Geneva,sans-serif; margin: 5px 0pt; padding: 0pt 10px;">Klik Disini !</button>
background-color adalah warna latar button.
color adalah warna tulisan/text.
font adalah huruf teks.
Klik Disini ! Tulisan yang akan ditampilkan
Semoga sukses tunggu macam-macam button selanjutnya!