Home > CSS Tips and Tricks > CSS Menu Buttonsprinter version

CSS Menu Buttons

To create menu buttons that span the width of a container and change on mouseover (like the ones on this site) requires the use of two CSS features.

Pseudo-classes that allow you to add additional control to some elements, in this case links.
The CSS position property display that determines if an element is displayed inline or given a line to itself using block.

Creating a Pseudo-class with Display Set to Block

First create a pseudo-class for the links, which will be applied to the anchor element.

You have the option of controlling the appearance of the following link conditions.

An unvisited link - designated by link.
A visited link - designated by visited.
When the mouse is over the link - designated by hover.
When the link has been selected - designated by active

Note: For hover to work properly it must come after link and visited. For active to work properly it must come after hover.

Below is the style definition used on this site to create the menu buttons on the left.

The Style Sheet Document Called effects.css

.nav a:link {
display: block;
text-align: left;
background-color: #ffffff;
background: url(graphics/nav.jpg);
border-color: #cccccc;
border-style: solid;
border-width: 1px;
padding-left: 7px;
padding-bottom: 2px;
color:#000000;
text-decoration: none;
margin-bottom: 2px;
}
.nav a:visited {
display: block;
text-align: left;
background-color: #ffffff;
background: url(graphics/nav.jpg);
border-color: #cccccc;
border-style: solid;
border-width: 1px;
padding-left: 7px;
padding-bottom: 2px;
color:#666699;
text-decoration: none;
margin-bottom: 2px;
}
.nav a:hover {
display: block;
text-align: left;
background-color: #666666;
background: url(graphics/nav2.jpg);
border-color: #666666;
border-style: solid;
border-width: 1px;
padding-left: 7px;
padding-bottom: 2px;
color:#ffffff;
text-decoration: none;
margin-bottom: 2px;
}

Implementing the Buttons in HTML

This is done by using a span tag with the name of the pseudo-class to surround the links.

The HTML Document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="effects.css" type="text/css">
</head>
<body>

<a href="css_tips_menu_buttons.php">Using block causes the button to fill the space available.</a>
<a href="css_tips_menu_buttons.php">Using block causes the button to fill the space available.</a>

</body>
</html>

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP