Styling Buttons

As a Web designer, odds are that at some point you've used the classic links-down-the-side interface: A page title across the top, the content below that, and down the left side (usually) you put a column of buttons. This approach has been used by nearly everyone from CNN to Microsoft to, well, Web Review.

In some cases, you may have decided that you were better off using just plain text links, since they're easier to fix if there's a spelling error, not to mention easier to change or add. If you need a new button, all you have to do is type it in, not create it in something like Photoshop. And, of course, you don't have to worry about button length that way. With graphic buttons, they all have to be the same width, or else they start to look dumb. If you add a new button that's wider than the others, then you may have to go back and resize the others, and that's just a pain.

With CSS, however, you can get the best of both worlds...assuming you're willing to put a little thought into accounting for browsers that don't support CSS. By using the background properties of CSS, you can have buttons that scale to whatever size is needed, and have interesting decorations, all at the same time, like these:

Doing it right

For the moment, let's assume that all browsers fully-support CSS1, and explore the simplest way to get the effect we want. In this case, all we need to do is set up each button like so:

<tr>
  <td class="cap"><img src="buttoncap.gif"></td>
  <td class="text">Button #1</td>
</tr>

This causes the image (buttoncap.gif; the rounded end of the button) to be placed in one cell, and the text label for the button in another -- both in the same row. The style classes are there for creating effects, which we'll see in a moment. Without CSS, and with the row's borders turned on, the above markup would look like this:

Button #1

So far we have two parts of the button -- the button's text and a graphic for the left side of the button. Now we need another cap to finish off the right side of the button. In this case, we need to place the second cap in the background of the cell that has the text in it.

We can do this with CSS, of course. Given the image buttonbg.gif, we can place it on the right side of the text cell's background like this:

TD.text {background: white url(buttonbg.gif) top right no-repeat;}

...but that, unfortunately, will get us the following:

The problem is that the background image has been placed right under the text. This is correct behavior, but visually it's a mistake. Therefore, we need to set some extra space. Since buttonbg.gif is about 17 pixels wide, we can create an interesting effect by setting the right padding of the text cell to 10px. This will make the text look as though it's hanging into the cap, so to speak. This requires the following styles, and gets the following result:

TD.text {background: white url(buttonbg.gif) top right no-repeat;
         padding-right: 10px;}

We could add other styles for the font and its alignment, but we have a problem to deal with first. The problem is that in order to achieve the effect shown in the preceding figure , we've positioned the background image so that it appears in the upper right corner using the top right properties in the style sheet. That's fine as long as the browser supports the positioning of background elements. But if the browser (e.g., Navigator 4) doesn't support such positioning, you'll end up with something that looks like this instead:

That's pretty gross, huh? The solution (i.e., work-around) to this problem is to slice up the caps, and add a small amount of padding to the text cell. This will leave room for the offending cap, and result in the following:

TD.text {background: white url(buttonbg.gif) top right no-repeat;
         padding-right: 10px;
         padding-left: 20px;}

And there you have it -- almost...

No (Browser) Pain, No Gain

Now that we've managed to work around everything, we find that life isn't quite so accommodating. For example, the problem we just solved for Navigator 4 will produce the following in Internet Explorer 4.5 for the Macintosh:

So it's back to the drawing board. Since most of our troubles seem to be centered around assigning properties to table elements (e.g., TD), maybe we need to stop doing that and find another approach? Given the various browser bugs and other issues, it might be best to revive the idea of graphical buttons, but not in the same way.

Instead of creating buttons that are just one big graphic, we can keep the button caps, and create graphical button text. If we set them up correctly, and use transparent backgrounds for the buttons, we should get very similar results.

Create each button with the colors for your site. Ensure that the background is white, and that you have 10 pixels of white space on the right side of the text and 20 pixels on the left. You need to make sure that the images are as tall as the button caps (in my examples, the button caps are 25 pixels tall). Then save the text as a GIF image with the white pixels set to transparent. This should give you something that looks like this:

Now we alter the styles and markup to get the following:

TD.text {background: white url(buttonbg.gif) top right no-repeat;}
<tr>
  <td class="cap"><img src="buttoncap.gif"></td>
  <td class="text"><img src="text.gif"></td>
</tr>

As you can see, we've produced roughly the same effect, although we had to drop the text to do it. While this is less in the spirit of CSS, the advantage here is that the text styling for each of the buttons will be the same. Also, you end up with buttons which look okay in various browsers; for example, here is how they should look in Internet Explorer 4.x and Navigator 4.x, respectively:

While they're not exactly the same, at least neither one looks like a complete mistake.

This month's excursion into CSS has been interesting, to say the least, given that we started with a nice text-based effect and managed to end up with a heavily graphics-based solution with a reduced use of CSS. Unfortunately, browser incompatibilities will do that to you. In general, the main point here is that if you're going to use techniques like those described in this month's column, you need to think your approach through carefully, and make sure that browser bugs won't completely wreck what you're trying to accomplish.

Previously in Sense of Style

Styling Buttons
Who Owns the Patent to Style Sheets?
Microsoft Awarded Style Sheet Patent