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.

I just uploaded 3 new Photoshop layer styles designed to be used together to create soft-edged interfaces. Download them from the “Goodies” section of my home page here:

http://kristinbradley.com/goodies/effects.html

Use the “Soft Interface” style to create an interface shape. This style works with a variety of colors or shades of grey. (Works best with mid-range tones.) Then use the soft button style to create buttons to go with the interface you created. Looks nice with buttons using the same color as the interface but experiment with different colors depending on the effect you are after. The final layer style in the collection is the “Soft Indent” style which you can use to further dress up your interface. Add 1 pixel horizonatl lines or 1 pixel “dots” on a new layer about the interface shape you created. It doesn’t matter what color you make these lines. They will take on the color of the underlying interface layer.