How to Turn Links into Buttons for HTML5 and CSS3 Programming

As far as the HTML5 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;
 background-color: #EEEEFF;
 box-shadow: 5px 5px 5px gray;
 margin-bottom: 2px;
}
#menu a:hover {
 background-color: #DDDDEE;
 box-shadow: 3px 3px 3px gray;
 border: none;
}

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. This example uses a list of links to some popular websites:

    <div id = "menu">
     <ul>
     <li><a href = "http://www.google.com">Google</a></li>
     <li><a href = "http://www.wiley.com">Wiley</a></li>
     <li><a href = "http://www.wikipedia.org">Wikipedia</a></li>
     <li><a href = "http://www.reddit.com">Reddit</a></li>
     </ul>
    </div>

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 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 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 to a negative margin-left 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;
    background-color: #EEEEFF;
    box-shadow: 5px 5px 5px gray;
    margin-bottom: 2px;
   }

   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 a box shadow, as shown in the following:

    box-shadow: 5px 5px 5px gray;

   The shadow 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 because the mouse has a much bigger target to aim for:

    display: block;

9. Provide a small gap to separate each element.

   Use the margin-bottom rule to separate each button. This will enhance the 3D effect by making the shadows more obvious.

   margin-bottom: 2px;

10. Provide a border radius for rounded corners.

    Use of the border-radius property gives the corners a nice rounded effect, enhancing the button feel.

11. Use an outset border for a little more dimension.

    Setting the border to outset can give the buttons just a bit more 3D appeal.

12. Make the button depress when the mouse hovers on an anchor:

    #menu a:hover {
     background-color: #DDDDEE;
     box-shadow: 3px 3px 3px gray;
     border: none;
    }

    When the mouse hovers on the button, the shadow is smaller, and the background color of the element is darker. You can also remove the border, making the button feel flat. These techniques together give a convincing illusion of the button being depressed.

This list makes an ideal navigation menu, especially when placed inside one column of a multicolumn floating layout.

The shadow trick is easy, but there are many variations. If you prefer, you can build two empty button images (one up and one down) in your image editor and simply swap the background images rather than changing the shadows. Some variations also involve changing the border.