CSS3 Gradient Menu Buttons

Author: Dynamic Drive

 

These fancy looking buttons brings together CSS3's border-radius, box-shadow, and linear gradients to create glossy looking menu buttons that use NO images. They consist of just a regular UL list that can easily be left, centered, or right aligned. Visually these buttons look best in FF3.5+, Chrome, and Safari 4+, while in other browsers, they still look presentable enough.

 

The HTML: 

<div class="gradientbuttons orangetheme"> <ul> <li><a href="http://www.dynamicdrive.com" mce_href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm" mce_href="http://www.dynamicdrive.com/new.htm">DHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/" mce_href="http://www.dynamicdrive.com/style/">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/" mce_href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com/imageoptimizer/" mce_href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li> </ul> </div>

 

The CSS:

.gradientbuttons ul{ padding: 3px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 13px 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:18px; 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:12px; 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:16px; 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:14px; 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)); }