Selama ini bentuk dan rupa button hanyalah dalam bentuk yang itu-itu saja dan kadang melihatnya terasa sangat membosankan. Kini bentuk usang dan kuno button akan semakin ditinggalkan oleh pengguna blog. Desain butoon yang lebih inovatif mampu dikembangkan dengan berbagai pengembangan melalui css3 dengan berbagai bentuk dan variasinya. Untuk menciptakan button keren dan lebih menarik kita bisa gunakan background image, background color, text-shadow, box-shadow, border-radius, opacity-effects, blik effects, berbagai jenis dan ukuran serta warna font serta beberapa penambahan kode css yang lain. Beberapa contoh berikut hanyalah sebagian dari css3 button yang telah aku buat dan mungkin akan bermanfaat bagi kita :
Cara membuat css3 buttons
Kode css css3 buttons
.bt1{
background-color:#C0C0C0;
border:1px solid #A9A9A9;
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-goog-ms-border-radius:5px;
margin:1px;
padding:3px 3px;
-webkit-box-shadow:0px 1px 2px #696969;-moz-box-shadow: 0px 1px 2px #696969;
box-shadow:0px 1px 2px #696969;-goog-ms-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://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgButtons-1V5H5.gif);
-webkit-border-radius:10px 9px;-moz-border-radius:10px 9px;
border-radius: 10px 9px;-goog-ms-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;
-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px;-goog-ms-border-radius:9px;
padding: 6px 8px 4px 8px;
color:black;
font-family:Arial;
font-size: 10px;
font-weight: bolder;
letter-spacing: -1px;
font-style: italic;
text-transform: uppercase;
text-align: left;
}
.bt3:hover{background:#FF8C00;}
.bt4 {
background:#4b1701;
border:1px solid #d8dada;
-webkit-border-radius:11px;-moz-border-radius:11px;
border-radius:11px;-goog-ms-border-radius11px;
margin:1px;
padding:1px 8px 3px;
-webkit-box-shadow: 1px 1px 3px #a1d7fd;-moz-box-shadow:1px 1px 3px #a1d7fd;
box-shadow:1px 1px 3px #a1d7fd;-goog-ms-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://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgButtons-2H15V25.png)) center repeat;
border:1px solid #33CC99;
-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-goog-ms-border-radius:10px;
margin:1px;
padding:2px 6px 4px;
-webkit-box-shadow: 1px 1px 2px #333;-moz-box-shadow:1px 1px 2px #333;
box-shadow:1px 1px 2px #333;-goog-ms-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:yellow;background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgButtons-3V31H33.gif);}
.bt4:hover{color:red;background:#CCCCCC;}
#btst1{background:#FF8C00;text-transform:capitalize;}
#btst2{background:#996600;text-decoration:blink;}
#btst3{background:#FF0000;font-family:Verdana;}
Langkah penggunaan css3 buttons
- Simpan kode css di atas kode ]]></b:skin> di halaman Edit HTML.
- 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.
- Bisa juga download kode CSS yang telah dicompress dan di upload (dalam bentuk link). Simpan link css hasil download di bawah kode <head> .
Bentuk pemasangannya seperti ini :
<head>
<link href="http://h1.ripway.com/.../.../css3_bgsGRbuttons.css" rel="stylesheet" type="text/css" media="screen" />
- KLIK SAVE/Simpan Template.
<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
<button class="bt1" id="btst1">Button text</button> <button class="bt1" id="btst2">Button text</button> <button class="bt1" id="btst3">Button text</button>
Lakukan juga untuk button 2, 3, 4 dan 5, seperti kode berikut :
<button class="bt2" id="btst2">Button text</button> <button class="bt3" id="btst2">Button text</button> <button class="bt4" id="btst2">Button text</button> <button class="bt5" id="btst2">Button text</button>
