Beragam Macam Menu Buttons With Gradient CSS

Beragam Macam Menu Buttons With Gradient CSS

• Facebook
• jQuery
• CSS
• SEO
• Widget

• Facebook
• jQuery
• CSS
• SEO
• Widget

• Facebook
• jQuery
• CSS
• SEO
• Widget

• Facebook
• jQuery
• CSS
• SEO
• Widget

• Facebook
• jQuery
• CSS
• SEO
• Widget

KODE CSS :

.gradbutton { margin: 30px 0px 0px 0px }
    .gradbutton ul {
        padding: 3px 0;
        font: bold 13px Verdana;
        list-style-type: none;
        text-align: center; /*menu alignment*/
    }
    .gradbutton li {
        display: inline;
        margin: 0;
    }
        .gradbutton li a {
            text-decoration: none;
            padding: 5px 7px;
            margin-right: 5px;
            color: #fff;
            background: #6fdfff;
            border-radius: 8px;
            box-shadow: 3px 3px 4px rgba(0,0,0,.5);
            -moz-border-radius: 8px;
            -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
            -webkit-border-radius: 8px;
            -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
            background: -moz-linear-gradient(center top, #7fe0fc, #2fcaf6 25%, #0faad6 45%, #2fcaf6 85%, #7fe0fc);
            background: -webkit-gradient(linear, center top, center bottom, from(#7fe0fc), color-stop(25%, #2fcaf6), color-stop(45%, #0faad6), color-stop(85%, #2fcaf6), to(#7fe0fc));
        }
        .gradbutton li a:hover {
            color: #fff;
            background: #0faad6;
        }
.violettheme li a {
    font-size: 18px;
    background: #8c0787;
    background: -moz-linear-gradient(center top, #d162cd, #a0109b 25%, #8c0787 45%, #a0109b 85%, #d162cd);
    background: -webkit-gradient(linear, center top, center bottom, from(#d162cd), color-stop(25%, #a0109b), color-stop(45%, #8c0787), color-stop(85%, #a0109b), to(#d162cd));
}
.violettheme li a:hover {
    font-size: 18px;
    background: #8c0787;
}
.greentheme li a {
    font-size: 12px;
    background: #079900;
    background: -moz-linear-gradient(center top, #84f57f, #2abb23 25%, #079900 45%, #2abb23 85%, #84f57f);
    background: -webkit-gradient(linear, center top, center bottom, from(#84f57f), color-stop(25%, #2abb23), color-stop(45%, #079900), color-stop(85%, #2abb23), to(#84f57f));
}
.greentheme li a:hover {
    font-size: 12px;
    background: #2abb23;
}
.blacktheme li a {
    font-size: 16px;
    background: #474747;
    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));
}
.blacktheme li a:hover {
    font-size: 16px;
    background: #000;
}
.yellowtheme li a {
    font-size: 14px;
    color: #886800;
    background: #ffd95d;
    background: -moz-linear-gradient(center top, #fff2c1, #ffd95d 25%, #ffd343 45%, #ffd95d 85%, #fff2c1);
    background: -webkit-gradient(linear, center top, center bottom, from(#fff2c1), color-stop(25%, #ffd95d), color-stop(45%, #ffd343), color-stop(85%, #ffd95d), to(#fff2c1));
}
.yellowtheme li a:hover {
    font-size: 14px;
    color: #886800;
    background: #ffd343;
}

KODE HTML :

<div class="gradbutton greentheme">
    <ul>
        <li><a href="http://.blogspot.com/search/label/Tips-Trik%20Facebook">Facebook</a></li>
        <li><a href="http://.blogspot.com/search/label/jQuery">jQuery</a></li>
        <li><a href="http://.blogspot.com/search/label/CSS3">CSS</a></li>
        <li><a href="http://.blogspot.com/search/label/SEO">SEO</a></li>
        <li><a href="http://.blogspot.com/search/label/Widget">Widget</a></li>
    </ul>
</div>
<div class="gradbutton">
    <ul>
        <li><a href="http://.blogspot.com/search/label/Tips-Trik%20Facebook">Facebook</a></li>
        <li><a href="http://.blogspot.com/search/label/jQuery">jQuery</a></li>
        <li><a href="http://.blogspot.com/search/label/CSS3">CSS</a></li>
        <li><a href="http://.blogspot.com/search/label/SEO">SEO</a></li>
        <li><a href="http://.blogspot.com/search/label/Widget">Widget</a></li>
    </ul>
</div>
<div class="gradbutton yellowtheme">
    <ul>
        <li><a href="http://.blogspot.com/search/label/Tips-Trik%20Facebook">Facebook</a></li>
        <li><a href="http://.blogspot.com/search/label/jQuery">jQuery</a></li>
        <li><a href="http://.blogspot.com/search/label/CSS3">CSS</a></li>
        <li><a href="http://.blogspot.com/search/label/SEO">SEO</a></li>
        <li><a href="http://.blogspot.com/search/label/Widget">Widget</a></li>
    </ul>
</div>
<div class="gradbutton blacktheme">
    <ul>
        <li><a href="http://.blogspot.com/search/label/Tips-Trik%20Facebook">Facebook</a></li>
        <li><a href="http://.blogspot.com/search/label/jQuery">jQuery</a></li>
        <li><a href="http://.blogspot.com/search/label/CSS3">CSS</a></li>
        <li><a href="http://.blogspot.com/search/label/SEO">SEO</a></li>
        <li><a href="http://.blogspot.com/search/label/Widget">Widget</a></li>
    </ul>
</div>
<div class="gradbutton violettheme">
    <ul>
        <li><a href="http://.blogspot.com/search/label/Tips-Trik%20Facebook">Facebook</a></li>
        <li><a href="http://.blogspot.com/search/label/jQuery">jQuery</a></li>
        <li><a href="http://.blogspot.com/search/label/CSS3">CSS</a></li>
        <li><a href="http://.blogspot.com/search/label/SEO">SEO</a></li>
        <li><a href="http://.blogspot.com/search/label/Widget">Widget</a></li>
    </ul>
</div>

Selamat Berjuang gan.hehee.. ^^