Membuat Tombol Dengan Efek Berkilau CSS3

Banyaknya efek yang bisa di ciptakan dengan kode CSS3 keliatannya semakin mempermudah para web designer di seluruh dunia saat ini. Selain bisa membuat tampilan real atau nyata, penggunaan kode CSS3 juga membuat loading page sebuah situs jauh lebih ringan karena gx perlu ditambah embel” image macem” lagi.
Diantara banyaknya efek” keren tersebut,kali ini gw bakalan bagi sedikit cara aja buat bikin tombol/button dengan efek kilau.Tadinya sih,gw pikir gx perlu.. tapi berhubung gw liat beberapa tutorial di luar sana agak susah di pahami alias setengah” dalam ngasih tutorial.Gw rasa sih gx perlu sampe sebutin nama situs nya deh, tapi yg jelas,tutorial” tersebut gx ngajarin cara masang tombol/button ini ke dalam kode HTML blog.Bahkan yg di ajarin cuma cara bikin tombol satuan alias bukan dalam bentuk navigation bar ( Navbar ).
Alhasil,gw pun ngotak-atik sendiri deh buat bikin navbarnya.

Nah,buat bikin navbar dengan efek berkilau kyk gambar di atas,caranya gx rumit” banget koq sebenarnya.Cukup ikuti langkah” berikut ini.
1. Login dulu ke account blogger sobat, kemudian ke Tab EDIT HTML. (jangan lupa backup dulu template nya dengan meng-klik link Download Template Lengkap)
2. Cari kode ]]></b:skin> dan taruh kode di bawah ini sebelum kode tersebut.

#bgmenu {
width:100%;
height:30px;
}
#menu a {
font:12px verdana;
font-weight:bold;
color:#000;
text-shadow:0px 2px 3px #fff;
text-decoration:none;
}
#menu a:hover {
color:#fff;
text-shadow:0px 2px 3px #000;
text-decoration:none;
}
#menu li {
margin-right:10px;
float: left;
list-style: none;
}
.biru {
text-align:center;
background:-moz-linear-gradient(top, #005aff, #8bcdff);
width:80px;
padding:5px;
margin-bottom:10px;
-moz-border-radius:50px;
-moz-box-shadow:0px 5px 8px grey;
border:1px solid #005aff;
}
.kilau {
background:#fff;
height:5px;
margin:-5px 0px 15px 0px;
padding:5px 5px 5px 5px;
color:000;
-moz-border-radius:20px;
-moz-box-shadow:0px 2px 6px #999;
opacity:0.6;
}
.text {
margin-top:-25px;
color:#000;
font:14px trebuchet ms;
font-weight:bold;
opacity:0.9;
}

3. Kemudian cari kode </head> , dan taruh kode di bawah ini setelah kode tersebut.

<div id="bgmenu">
<ul id="menu">
<li><div class="kilau"><div class="kilau"></div><div class="text">
<a href="#">Menu 1</a></div></div></li>
<li><div class="kilau"><div class="kilau"></div><div class="text">
<a href="#">Menu 2</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 3</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 4</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 5</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 6</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 7</a></div></div></li>
</ul></div>

4.  Sobat tinggal mengganti tanda berwarna merah “#" dengan URL link tujuan, dan mengganti tulisan berwarna hijau “Menu 1-7” dengan judul dari link tersebut. Contoh:

<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="http://anggaleoputra.blogspot.com">InfoGaul</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="http://anggaleoputra.blogspot.com/search/label/Templates”>
Free Template</a></div>
</div></li>

5. Lihat dulu previewnya, klo udah mantep , langsung save aja sob.. ^^.
See u..