• Choose a category
• All
• Classic-Fiction

type = ”text/css”

href = ”buttonList.css” />

Button Lists

Turning links into buttons

As far as the XHTML code is concerned, it’s simply a list of links. There’s nothing special here that makes this act like a group of buttons, except the creation of a div called menu. All the real work is done in CSS:

#menu li {

list-style-type: none;

width: 7em;

text-align: center;

margin-left: -2.5em;

}

#menu a {

text-decoration: none;

color: black;

display: block;

border: 3px blue outset;

background-color: #CCCCFF;

}

#menu a:hover {

border: 3px blue inset;

}

The process for turning an ordinary list of links into a button group like this is simply an application of CSS tricks:

1. Begin with an ordinary list that will validate properly.

It doesn’t matter if you use an unordered or ordered list. Typically, the list will contain anchors to other pages. In this example, I’m using this list of links to some popular Web sites:

2. Enclose the list in a named div.

Typically, you still have ordinary links on a page. To indicate that these menu links should be handled differently, put them in a div named menu. All the CSS-style tricks described here refer to lists and anchors only when they’re inside a menu div.

3. Remove the bullets by setting the list-style-type to none.

This removes the bullets or numbers that usually appear in a list because these features distract from the effect you’re aiming for (a group of buttons). Use CSS to specify how list items should be formatted when they appear in the context of the menu ID:

#menu li {

list-style-type: none;

width: 5em;

text-align: center;

margin-left: -2.5em;

}

4. Specify the width of each button:

width: 5em;

A group of buttons looks best if they’re all the same size. Use the CSS width attribute to set each li to 5em.

5. Remove the margin by using a negative margin-left value, as shown here:

margin-left: -2.5em;

Lists have a default indentation of about 2.5em to make room for the bullets or numbers. Because this list won’t have bullets, it doesn’t need the indentations. Overwrite the default indenting behavior by setting margin-left to a negative value.

6. Clean up the anchor by setting text-decoration to none and setting the anchor’s color to something static, such as black text on light blue in this example:

#menu a {

text-decoration: none;

color: black;

display: block;

border: 3px blue outset;

background-color: #CCCCFF;

}

The button’s appearance will make it clear that users can click it, so this is one place you can remove the underlining that normally goes with links.

7. Give each button an outset border, as shown in the following:

border: 3px blue outset;

The outset makes it look like a 3D button sticking out from the page. This is best attached to the anchor, so you can swap the border when the mouse is hovering over the button.

8. Set the anchor’s display to block.

This is a sneaky trick. Block display normally makes an element act like a block-level element inside its container. In the case of an anchor, the entire button becomes clickable, not just the text. This makes your page easier to use:

display: block;