CARA MEMBUAT CSS3 BOTTON

center>
css3 buttons

Buttons-1

buttons-2

buttons-3

buttons-4

button-5

buttons lain

Cara membuat css3 buttons

.bt1{ background-color:#C0C0C0; border:1px solid #A9A9A9; border-radius:5px; margin:1px; padding:3px 3px; box-shadow:0px 1px 2px #696969; color:white; font-size:11px; font-weight:bold; letter-spacing:0px; text-shadow:0px 1px 2px black; } .bt1:hover{color:#CCFF00;background:#333399;} .bt2{ background:#4682B4 url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/bgButtons-1V5H5.gif); border-radius: 10px 9px; border: 1px solid #99CCCC; margin: 5px; padding: 4px 10px 2px 10px; min-width: 115px; color: white; font-family: helvetica, arial, sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 0px; word-spacing: 0px; text-align: center; text-shadow: 0px 0px 0px black; } .bt2:hover{color:#FF0000;background:#333;} .bt3{ background:white; border:1px solid #FF8C00; border-radius:9px; padding: 6px 8px 4px 8px; color:black; font-family:Arial; font-size: 10px; font-weight:bold; letter-spacing: -1px; font-style: italic; text-transform: uppercase; text-align: left; } .bt3:hover{background:#FF8C00;} .bt4{ background:#4b1701; border:1px solid #d8dada; border-radius:11px; margin:1px; padding:1px 8px 3px; box-shadow:1px 1px 3px #a1d7fd; color:#0101ff; font-size: 12px; font-family:Times New Roman; font-weight: bold; letter-spacing: 0px; text-shadow: 0px 1px 1px #FFCC33; } .bt5{ background:#336666 url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/bgButtons-2H15V25.png) center repeat; border:1px solid #33CC99; border-radius:10px; margin:1px; padding:2px 6px 4px; box-shadow:1px 1px 2px #333; color:#0000FF; font-size:12px; font-family:Cursive; font-weight:bold; letter-spacing:0px; text-shadow: 0px 1px 1px #FFCC33; } .bt5:hover{color:#6CF;text-shadow:1px 1px 1px #000;background:url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/bgButtons-3V31H33.gif);} .bt4:hover{color:red;background:#CCCCCC;} .bt1,.bt2,.bt3,.bt4,.bt5,.btst1,.btst2,.btst3{ cursor:pointer; transition:0.8s; -o-transition:0.8s; -moz-transition:0.8s; -webkit-transition:0.8s; -ms-transition:0.8s; } a#GRbt,a.GRbt,a#GRbt:hover,a.GRbt:hover{text-decoration:none;} .btst1{background:#FF8C00;text-transform:capitalize;} .btst2{background:#996600;text-decoration:blink;} .btst3{background:#FF0000;font-family:Verdana;} Langkah penggunaan css3 buttons

1. Simpan kode css di atas kode ]]></b:skin> di halaman Edit HTML.
2. Untuk sampai di halaman Edit HTML, lakukan :
   
   - Login ke BloGGer
   - Dasboard --> KLIK Design/Rancangan
   - Design/Rancangan --> KLIK Edit HTML
   - Cari Kode ]]></b:skin>, kemudian letakkan kode css3 buttons persis di atasnya.
   - Kode CSS juga bisa di upload di file hosting (google sites atau google code), kemudian link kode cssnya di simpan di atas kode </head> .
   
   Bentuk pemasangannya seperti ini :
   
   

   <link href="button-keren.css" rel="stylesheet" type="text/css" media="screen" />
   
   </head>

   
   - KLIK SAVE/Simpan Template.

Penggunaan kode HTML css3-buttons di halaman posting atau yang lain

xHTML :

<button class="bt1">Button text</button>

<button class="bt2">Button text</button>

<button class="bt3">Button text</button>

<button class="bt4">Button text</button>

<button class="bt5">Button text</button>

<button class="bt1">Button text</button>

Untuk model lain gunakan tambahan kode ini

xHTML :

<button class="bt1 GRbt1">Button text</button>

<button class="bt1 GRbt2">Button text</button>

<button class="bt1 GRbt3">Button text</button>

Lakukan juga untuk button 2, 3, 4 dan 5, seperti kode berikut :

xHTML :

<button class="bt2 GRbt2">Button text</button>

<button class="bt3 GRbt2">Button text</button>

<button class="bt4 GRbt2">Button text</button>

<button class="bt5 GRbt2">Button text</button>

Cara menggunakan Button CSS3 dalam sebuah link

Tambahkan tag a dengan class atau id GRbt baru kemudian tag button berada di dalamnya. Lihat contoh berikut:

<a id="GRbt" href="Your URL here" title="Your title here"><button class="bt1">Button Text</button></a>

Atau seperti ini :

<a class="GRbt" href="Your URL here" title="Your title here"><button class="bt1">Button Text</button></a>

SUMBER: http://gubhugreyot.blogspot.com/2010/07/css3-buttons-cara-membuat-button-keren.html