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
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.
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.
Tweet
Victor
June 1
Really nice buttons! Thanks!
SEO Freelance India
January 5
It is a good tutorial, sure will help me in my SEO and Web Design freelance projects. Thanks for sharing
gifts you love
January 19
Hello there.. I am a newbie to blogging world and I been doing some browsing to get some ideas. Your wordpress blog definitely has help me. Really appreciate for that!.. and not to mention I’vebookmarked your Create an Advanced CSS3 Menu Cameron Baney Design Blog .
Justin mccoy
March 9
Cant get the border-radius tag to work with these buttons on chrome. I know it works though as i have it used on another part of my site. Any reason these buttons wouldn’t work on chrome?
Cameron Baney
March 9
Justin,
Are you including the CSS3 property for webkit border radius in your stylesheet? -webkit-border-radius: 5px
If you are, maybe the property before isn’t closed properly, therefore making the -webkit-border-radius tag not readable.
Feel free to comment with your CSS code, or provide a link, and I can take a look at it.
Loriann
September 10
What¡¦s Going down i’m new to this, I stumbled upon this I’ve found It absolutely useful and it has aided me out loads. I am hoping to give a contribution & help other users like its helped me. Good job.
tommy
September 19
thanks Cameron .i really love the lively colors . i’m using the exact colors along with this CSS 3 Drop Down Menu tutorial for one of my clients