css3 Buttons: Cara membuat Button Keren dg CSS3

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 yang 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 :


css3 buttons

Buttons-1

buttons-2

buttons-3

buttons-4

button-5

buttons lain

Cara membuat css3 buttons

Kode css css3 buttons

Kode CSS :

.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>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senin PON, Maret, 05, 2012

» Happy Blogging - gubhugreyot «