Customize buttons in a menu using CSS

Let’s assume we want to create a navigation bar similar with the one below. I think a lot of web developers know how to create it. We slice the “1px width” image with the black gradient, one similar image with the green gradient and so on for other colors. If you see here the demo, you’ll see that every button has his own color. So, the conclusion might be that we’ll need for each button a different “1px width” image with every gradient we want to use.

If you want to change the colors, also you’ll need another images. The goal here is to create a menu which doesn’t need to have different images for each color. We’ll set the colors by changing the hex code in our CSS file. For the gradient we’ll use only one image which you can download it here. It’s a transparent png image, with gradient. The gradient and the transparency over a color, will create the gradient effect for every color used.

I have to mention that this menu will work properly only on browsers like ie7+, firefox, chrome, safari and opera. Internet explorer 6 doesn’t support transparent png files, and I hadn’t tested it in other browsers.

CSS code

#menu, #menu li { background-color:#000; } – This line will change the background of the main menu. The latest classes ( .blue:hover and the others ) will change the background color for the buttons. You have to declare some classes with the colors you want, and then apply them to each button, making this menu easy to customize. Class .hover has the transparent png file as a background.

body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }

#wrapper { width:960px; margin:10px auto; }

.hover { background:url(hover.png) repeat-x; }

#menu { height:50px; line-height:50px; }

#menu ul { padding:0px; margin:0px; list-style:none }

#menu ul li { margin:0px 25px; padding:0px; font-size:16px; float:left }

#menu, #menu li {  background-color:#000; }

#menu ul li a {
	display:block;  

	font-weight:bold; 

	color:#FFF;

	padding:0px 25px;

	text-decoration:none
}
#menu ul li a:hover { text-decoration:underline }

.blue:hover { background-color:#11AFD8 }
.orange:hover { background-color:#D25503 }
.green:hover { background-color:#399913 }
.yellow:hover { background-color:#D9AE08 }

HTML code

You will have to apply the “.hover” class to all buttons, and also the class containing the colors you want for each button.

Menu item 1
Menu item 2
Menu item 3
Menu item 4

Live demo

Click here for live demo.

Get it

Click here to download the files.