Create an Advanced CSS3 Menu

Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. This is a tutorial explaining how to create great looking buttons using just CSS3.

Version 2.0 has been released. This post will be here for any legacy references, but please refer to Version 2.0 for the latest.

Writing the Markup

Create an unordered list with some links in it

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Big Link</a></li>
  <li><a href="#">Bigger Link</a></li>
  <li><a href="#">Biggest link of them all</a></li>
  <li><a href="#">Link</a></li>
</ul>

Add classes to the elements. In this case, we are going to add the “cbdb-menu” to the unordered list, and colors to the list items.

<ul class="cbdb-menu">
  <li class="red"><a href="#">Link</a></li>
  <li class="green"><a href="#">Big Link</a></li>
  <li class="yellow"><a href="#">Bigger Link</a></li>
  <li class="cyan"><a href="#">Biggest link of them all</a></li>
  <li class="blue"><a href="#">Link</a></li>
</ul>

Styling the buttons with CSS3

That’s all the markup you need. Right now your list looks plain, but CSS will make it look sharp. Let’s start by adding the style for the menu.

.cbdb-menu li {
	display: block;
	float: left;
	line-height: 35px;
	list-style:none;
	margin: 0 5px;
	padding: 0 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

This applies these styles to the list items of the unordered list with the “cbdb-menu” class. Notice we are using browser specific tags. Those are the special CSS tags that allow us to achieve the effects we could only get by using images before. The border-radius tag gives the buttons rounded corners, while the box-shadow tag gives them a drop shadow.

With the buttons stylized, the next step is to style the button’s text. Add the following to your stylesheet.

.cbdb-menu li a {
	color: rgba(255, 255, 255, 0.8);
	font: 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
        font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.cbdb-menu a:hover {
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
li.dark a {
	color: rgba(0, 0, 0, 0.8);
font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}

The properties for .cbdb-menu li a make it look more like a button than a link. The text-shadow property lets the button look inset in the button. The dark class is an optional class that you can put on your list items if you want dark text.

That’s it!

Now you have your own super sexy menu built entirely with CSS3. Since these buttons are made with CSS3, they are easily expandable based on how long the link is. The techniques aren’t limited to creating a menu. The same CSS can be applied to regular links to create easy and great looking call to action buttons, submit buttons, or any other button you can think of!

For even more information about CSS3, visit www.css3.info.

Version 2 Released

Comments