quick tutorials

CSS buttons

Why use Javascript to create a simple button effect for links in a navigation panel when you can do this so easily with beautiful, standards-based CSS? Here's an example of what you can do. The following tutorial is based on this example. I've placed links throughout this recipe to relevant parts of our CSS Guide for those who want to know more about what's going on with the selectors and properties I've used. You'll probably find this tutorial a lot easier if you are already familiar with my links tutorial.

The HTML

I've seen CSS buttons done in a number of different ways, but the method which I think works most reliably uses the cleanest, most standards compliant HTML you can imagine. Here's the code for the top four buttons in the demo example.

Quite simply, you take the collection of links which you want to make into buttons, put each link inside separate <p> elements with a class attribute, then put all of these <p> elements inside a <div>. And that's it. You can close your HTML document now because the rest of the work is all done in the style sheet. Of course, you'll need to make sure that the HTML document is linked to the style sheet you are working on, but I know you'd never forget to do that :-)

Create the selectors

Here's the selectors you need, in the order in which we're going to work on them

• an id selector to select the <div>
• a class selector to select the <p> elements with the specified class
• two descendant selectors
  • to select links, or <a> elements, when they are inside <p> elements with the specified class
  • to select links in the hover state when they are inside <p> elements with the specified class

So, to start with, if you were working with the HTML above, your style sheet would look like this. Get those selectors right to start with and you save a lot of tears later.

Create the properties

Now working one declaration at a time, I've firstly given #navigator a few simple properties

• to create its appearance (background-color and border)
• to center it on the page (width, margin-top, margin-left and margin-right)
• to put a little space between the edges of the <div> and its contents (padding)
• to center its contents, ie the buttons (text-align)

So it will look like this.

The next declaration, .housebutton gives the basic appearance to the buttons,

• their text (font-weight and text-align)
• their position (margin-bottom and margin-top)

The margin-top and margin-bottom simply puts a little space between the buttons as I think this accentuates their "buttony nature". Sometimes you might prefer to put a margin of zero between them for a slightly different effect. The declaration looks like this when I'm finished.

The contextual selectors are what we use to create the button effect. The first one, which will describe the appearance of the link before the mouse moves over it, needs the following properties

• padding - just to put a little space between the text and the edge of the button
• text-decoration - I like to give this a value of none to remove the underlining from the linked text which is the button
• display - The <a> element has a display of inline by default. Because you want them to behave more like block elements here, you need to change their display to block.
• color- this just gives you control over the color of the text on your button
• background-color - this will be the color of the face of the button in its normal state - ie, before the mouse moves over it. If you choose a mid-tone color here it makes it easier to find matching slightly darker and lighter colors later to create the effect of the button being "pressed in".
• border-top and border-left - make these the same hue as the color of the button itself, but a little bit lighter
• border-bottom and border-right - again, these will work best if they are the same hue as the button, but this time a little bit darker

I might go into a little explanation of what's happening with color there, and then I'll outline the technique I've used to actually find the colors I chose.

Most contemporary operating systems use a sort of 3-D effect in their user interface. Windows and buttons look like three dimensional objects with the imaginary light source consistently coming from the top left hand corner of the desktop. That's why we create the border edges with top and left being a little lighter than the face of the button (if the button was in fact a raised object the light would be shining more brightly on these edges, no?), and right and bottom being a little darker (the imaginary light would not really be shining here at all, they would be in shadow).

Finding the colors is relatively easy if you create this style sheet with a WYSIWYG CSS Editor like Style Master, as you can simply use the color picker from the operating system. All you have to do then for the lighter and darker edges is base your choice on the background-color of the button face then increase or decrease the lightness. Hint: it works best when the differences in brightness between the three colors are surprisingly small.

So, the declaration in my example looks like this

Now all you have to do with the last selector is describe what will happen to the button when the mouse moves over it. (Note - you can make buttons that behave like buttons only when the user actually clicks on them. Instead of a:hover, use a:active.) You don't have to worry about most of the properties we already created for .housebutton a, as we just want them to stay the same even when the button is pressed in. You just have to set values for

• background-color - make this a little darker than the background-color for the button in its unclicked state, but not as dark as the color you use for the dark edges. Because the imaginary button is being pushed into the page, the face of the button will not have as much light on it.
• border-top and border-left - use the same color as you used for border-bottom and border-right in .housebutton a above. When the imaginary button is pushed in, these edges will be in shadow.
• border-bottom and border-right - use the same color as you did for border-top and border-left in .housebutton a above. When the imaginary button is pushed in, these edges will receive more direct light.

The finished declaration looks like this.

And, basically, that is it. How did you go, did you get your buttons to behave properly? One of the tricks is to get those color differences right. Have fun with your new technique and enjoy your lightweight, fast downloading pages.

{list-style-image: url(../gifs/l1bullet.gif)}

© 1997- western civilisation pty. ltd. Contact Us Search Site