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)); }