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

Copyright 2006-2016 Dynamic Drive