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 gradients are each a combination of 3 different colors with stop coloring applied, in the case of the first blue buttons above:
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2
45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
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 */
The following shows the spectrum of blue colors used in the blue buttons:
See CSS3 Linear Gradients for more information on using CSS gradients.