CSS Web Design

First, in an HTML document, create a simple unordered list of the items in your menu.

Example HTML for Button List:

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">FAQ</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>

In your CSS, set the margins and padding of your list to zero and the list-style to none.

CSS for Unordered List:

ul
{padding: 0;
margin: 0;
list-style: none;}


Set the text alignment of list items to center then define them as a block with a left float to line them up. Based on how many items you have in your menu, set a percentage width (divide the number of buttons by 100.)

CSS for List Items:

ul li
{text-align: center;
display: block;
float: left;
width: 20%;}


Define your links as blocks also and add styling to make them look like buttons (background, text color, border, etc.) Give the links a few pixels of padding. Adding a slight margin will separate the buttons:

CSS for Links:

ul a
{background: gray;
border: 1px solid black;
color: white;
margin: 1px;
text-decoration: none;
display: block;
padding: 2px;}

Slight variation:

Using the above code your button list will automatically stretch to fill the available space. If you don’t want the list to stretch to fill its container then add a width to the ul and set margin to auto to center it if desired.

Finishing touches:

You can add a hover style to your buttons using code such as the following.

CSS for Hover Effect:

ul a:hover
{background: red;}

Instead of using a solid color as a background you can use images to further customize the look of your buttons.