Creating Button Links Using Unordered Lists

I've long enjoyed the Windows Classic theme. On the old gray taskbar, one can pin icons of favorite programs. On hover, borders appear: light on top and left, dark on bottom and right. When clicked, the light and dark flip, and the content inside, either a small image or text, move down and to the side by 1px. This gives the appearance of a button being depressed. It's a very simple effect that seems to have been forgotten in this world of Web 2.0 we live in, so I've decided to try and replicate it myself for the navigation bar of my site.

You might ask, why not use the button or input tags? The problem with those is lack of customization options. While it might be a bit more code to build your buttons from scratch, you have a much wider range of options after they are finished. With the advent of HTML 5, you can even use this method to create curved buttons without using bandwidth-consuming images, though this tutorial doesn't cover that specifically.

First thing, create your html document. For this tutorial, I'm going to set up a very simple document, with a container that's got a gray background, to make the bottom and top borders of the buttons easier to see. It's important to play around with colors. Sometimes the area beside a button is a color that makes the border hard to recognize, which robs from the effect.



Inside your initial div container or inside your page create the button. Note, I'm going to make two buttons beside each other. This method easily allows creation of 1 or as many as you want beside each other, by adding more li's inside your ul. First create div container and set the id to whatever you want. I use "nav".



Next, create your css document. First, we enter the aspects that don't change. Background color, height, width, etc.



Next, in the same file, we set up the styling of links inside the id. Note, if you applied the settings below to the li itself, it works. That also has the benefit of letting you create the button without it being a link. However, if you do that, it causes problems for expanding sub menus. For those, it's possible to limit the button effect to the initial menu, and have the expanding menu appear not as 3D. Applying the effects direction to the li tags, it's not possible, at least that I know of, to do so.

Note: The first tag, for a, is broken with a space. In the first part, those are styles that don't change. Only the borders, background, and margin change. The margin changes to move the text inside slightly, to add to the effect of the button.



When hover occurs, the borders appear. They are created individually because we want more than one color. When active (clicked), the bordered are flipped in regards to color. The margin also changes, moving the text down and to the right 1 px each. The finished product of our tutorial is: