• Home
• About
• Downloads
• Tutorials
• Articles
• Templates
• Resources
• RSS Feeds
• Affiliates
• Contact

Tutorials > CSS > Large Button Menu Page 2

 

Adding Colors

Now lets add some spice by adding colors to the link states.

#navigation ul li a {
	display: block; 
	width: 150px; 
	height: 25px;
	line-height: 25px;
	color: #fff; 
	font-weight: bold;
}

#navigation a:link, #navigation a:visited {
	background-color: #DC234D;
}

#navigation a:hover, #navigation a:active {
	background-color: #FF597F;
}

Current Example

Current Highlight

Looks great so far huh? To get the complete look we will move the text 10px inwards using padding and span. We will also add a pointer to show what the current page is.

<li><a class="current" title="Item" href="#"><span>Item</span></a></li>
<li><a title="Item" href="#"><span>Item</span></a></li>
<li><a title="Item" href="#"><span>Item</span></a></li>
<li><a title="Item" href="#"><span>Item</span></a></li>
<li><a title="Item" href="#"><span>Item</span></a></li>

In our css, we have changed color of the .current, added 10px right padding to the span and included an image for the .current link.

Current Example

Finishing Touch

To complete the look of our navigation, we're going to add 1px padding to the bottom of each button so they don't look so cramped together. Use the color of whatever background your menu is on.

#navigation ul li a {
	display: block; 
	width: 150px; 
	height: 25px;
	line-height: 25px;
	color: #fff; 
	font-weight: bold;
	border-bottom: solid 1px #000;
}

Now, that's what I call a nice menu!

© 2005 Jay Hills of Ikonik.net

Go back to page 1.