CSS for Navigation Designs

CSS Buttons: Imageless

There are all types of different button-like entities that one can make using CSS. Here are a few more popular methods.

Each of the following methods use the following XHTML code:

		<ul id="nav_menu">
			<li><a href="#">Solutions</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Pricing</a></li>
			<li><a href="#">Portfolio</a></li>
			<li id="about_us"><a href="#">About Us</a></li>
		</ul>
	

Each also assumes that the basic list-look has been thwarted as follows:

		ul#nav_menu { 
			list-style-type: none; 
			margin: 0; 
			padding: 0; 
			}
			
		ul#nav_menu li { margin: 0; padding: 0; }
	

Non-Graphical Buttons

The idea is simple. Use the box model to make an element look like a button. I first give the ul a set width, which each button will adhere to. I also tell each li to have a little bit of a margin above and below each button:

		ul#nav_menu { 
			list-style-type: none; 
			margin: 0; 
			padding: 0; 
			width: 100px; 
			}
			
		ul#nav_menu li { margin: .5em 0; padding: 0; }
	

Now I target the anchor element to be more button-like:

		#nav_menu li a {
			display: block;
			width: 100%;
			padding: .1em .2em;
			text-align: center;
		}
	

Give it a background color, text color, border, and get rid of that annoying underline:

		#nav_menu li a {
			display: block;
			width: 100%;
			padding: .1em .2em;
			text-align: center;
			background: #442d40;
			color: #fff;
			border: 3px double #aa7d84;
			text-decoration: none;
		}
	

Et voila!

The last thing to do is make something happen when one mouses over the button. That's easy using the pseudo-class hover:

		#nav_menu li a:hover {
			background: #aa7d84;
			color: #ffff99;
			border: 3px double #442d40;
		}
	

If you want those buttons to align horizontally rather than vertically, that's easy:

		ul#nav_menu { 
			list-style-type: none; 
			margin: 0; 
			padding: 0; 
			width: 100%; 
		}
			
		ul#nav_menu li { 
			width: 100px; 
			margin: 0 .5em; 
			padding: 0;
			float: left
		}
	

Here's what that looks like:

Master those basic button building skills and you'll have the essential understanding to produce semi-graphical and graphical buttons (which we'll look at now).