Gradient Menu Buttons

S

ebagai contoh bisa anda lihat disini:DEMO
Cara pembuatan nya:
Cari kode : ]]></b:skin>
copas kode css dibawah ini dan letakkan di atas nya:

<style type="text/css"> .gradientbuttons ul{ padding: 3px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 11px Verdana; list-style-type: none; text-align: center; /*set to left, center, or right to align the menu as desired*/ } .gradientbuttons li{ display: inline; margin: 0; } .gradientbuttons li a{ text-decoration: none; padding: 5px 7px; margin-right: 5px; border: 1px solid #778; color: white; border:1px solid gray; background: #3282c2; border-radius: 8px; /*w3c border radius*/ box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */ -moz-border-radius: 8px; /* mozilla border radius */ -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */ background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */ -webkit-border-radius: 8px; /* webkit border radius */ -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */ background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */ } .gradientbuttons li a:hover{ color: lightyellow; } .redtheme li a{ font-size:11px; background: darkred; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); } .greentheme li a{ font-size:11px; background: green; background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690); background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); } .blacktheme li a{ font-size:11px; background: black; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); } .orangetheme li a{ font-size:11px; background: #e55e3f; background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a); background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a)); } </style>

Contoh Penerapan nya:

<div class="gradientbuttons">
<ul>
<li><a href="http://frogstomps.blogspot.com">Home</a></li>
<li><a href="http://frogstomps.blogspot.com">DHTML</a></li>
<li><a href="http://frogstomps.blogspot.com">CSS</a></li>
<li><a href="http://frogstomps.blogspot.com">Forums</a></li>
<li><a href="http://frogstomps.blogspot.com">Gif Optimizer</a></li>
</ul>
</div>


<div class="gradientbuttons redtheme">
<ul>
<li><a href="http://frogstomps.blogspot.com">Home</a></li>
<li><a href="http://frogstomps.blogspot.com">DHTML</a></li>
<li><a href="http://frogstomps.blogspot.com">CSS</a></li>
<li><a href="http://frogstomps.blogspot.com">Forums</a></li>
<li><a href="http://frogstomps.blogspot.com">Gif Optimizer</a></li>
</ul>
</div>


<div class="gradientbuttons greentheme">
<ul>
<li><a href="http://frogstomps.blogspot.com">Home</a></li>
<li><a href="http://frogstomps.blogspot.com">DHTML</a></li>
<li><a href="http://frogstomps.blogspot.com">CSS</a></li>
<li><a href="http://frogstomps.blogspot.com/">Forums</a></li>
<li><a href="http://frogstomps.blogspot.com">Gif Optimizer</a></li>
</ul>
</div>


<div class="gradientbuttons blacktheme">
<ul>
<li><a href="http://frogstomps.blogspot.com">Home</a></li>
<li><a href="http://frogstomps.blogspot.com">DHTML</a></li>
<li><a href="http://frogstomps.blogspot.com/">CSS</a></li>
<li><a href="http://frogstomps.blogspot.com/">Forums</a></li>
<li><a href="http://frogstomps.blogspot.com/">Gif Optimizer</a></li>
</ul>
</div>


<div class="gradientbuttons orangetheme">
<ul>
<li><a href="http://frogstomps.blogspot.com/">Home</a></li>
<li><a href="http://frogstomps.blogspot.com/">DHTML</a></li>
<li><a href="http://frogstomps.blogspot.com/">CSS</a></li>
<li><a href="http://frogstomps.blogspot.com/">Forums</a></li>
<li><a href="http://frogstomps.blogspot.com/">Gif Optimizer</a></li>
</ul>
</div>

Selamat Mencoba