CSS: Easy Centered Button Style List Menu

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-type to none. (These styles will be inherited by all contained list items.)

CSS for Unordered List:

ul
{padding: 0;
margin: 0;
list-style-type: 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 simple 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.

Advertisements
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s