Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Links & Buttons: CSS3 demos: Here

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.

The CSS:


Code Info

Rate this code:

Date Posted: 11/05/2010

Revision History: None

Usage Terms: Click here

Your Comments (8)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

The CSS and html code display great both in FF and Chrome. But in IE8, it shows a blank button. How to fix that ?
Posted by oneroan on 11/06, 10:00 AM
It shouldn't show a blank button in IE8, just a CSS button without the fancy gradient and round edges.
Posted by ddrive on 11/06, 11:15 AM
>How to fix that ?
Check the DOCTYPE.
Posted by Jo on 11/08, 02:01 AM
I like this too, I'm using it on one of my websites and I'll soon probably add it to more!
Posted by Jennifer P. on 11/14, 01:47 AM
I have used Gradient tool in Adobe Photoshop and I was creating buttons in photoshop only but with the unique feature of CSS i think my work will be easier now.


reckless driving lawyers
Posted by Matthew Sanner on 11/18, 09:03 AM
I'm using it on one of my websites and I'll soon probably add it to more!

herve leger
herve leger dress
herve leger dress
Posted by leo on 11/18, 11:27 PM
I liked the glossy look of the buttons
what about the IE?
Posted by webtrendset on 11/20, 12:08 AM
CSS is awesome but I think it will be a few years before is full potential is utilised by webmasters, manly due to browser inconsistencies
Beginners guide to CSS.
Posted by Tom Lucas on 11/21, 02:11 PM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.