This article originally appeared in the Design and Usability Tactics e-newsletter. Click here to subscribe automatically.

Traditional graphic buttons and the newer
buttons you can create with pure CSS-styled text each have their
advantages and disadvantages. However, a hybrid technique that uses
CSS-styled text over a background image may be the best of both
worlds.

Graphical buttons vs. CSS

Graphic buttons give you great design
flexibility but require you to create and load separate image files
for each button. If you want to create rollover effects, you must
create additional images for each state of each button and preload
those images upon page load.

CSS buttons are much faster to create and to
load because they rely on plain text, simple markup, and a few CSS
rules–no images are required. The problem is that pure CSS/text
buttons are limited to simple rectangles and flat colors, which
severely restricts your design options.

Introducing the graphical/CSS hybrid button

You’re no longer forced to choose between
CSS-button speed and graphical-button appearance. Instead, you can
replace the plain, solid-color background of a CSS-button with a
background image of a button face and superimpose the CSS-styled
text as the button’s text label. The background image can have
whatever texture, shading, bevel, and rounded corner effects you
want–just like a graphical button image. The result is a button
that has the dimensional appearance of a traditional graphical
button, while still retaining almost all the speed advantages of a
CSS button.

Creating these hybrid buttons is much faster
and easier than creating traditional graphic buttons because you
only need to create one graphic image for the blank button face.
The same image can be used for all the buttons on your page. Even
if you want to alter the background image for the various rollover
states, you only need to create one image for each state–not
separate images for each state of each button. Therefore, the
graphics are faster to create and much faster to load. And because
the button face image doesn’t contain any text, you can probably
use higher compression settings than you could with traditional
graphic buttons.

Except for the substitution of a background
image for a flat background color and border, the rest of the
technique for creating hybrid buttons is the same as for creating
any other CSS button. You’ll probably want to use the display: block property to
make the entire button area clickable instead of just the linked
text of the label button.

Here’s sample CSS for buttons that use the
hybrid technique:


div#menu {
    height: auto;
    width: 150px;
}
div#menu li {
    height: 40px;
    width: 125px;
    margin: 10px;
    font-family: Arial, Helvetica,
sans-serif;
    font-size: small;
    text-align: center;
    line-height: 200%;
    list-style-type: none;
    background-image:
url(images/buttonface-up.jpg);
    background-repeat: no-repeat;
}
div#menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
div#menu li a:link {
    color: blue:
}
div#menu li a:visited {
    color: #900;
}
div#menu li a:hover {
    font-weight: bold;
    color: red;
}

div#menu li a:active {
    font-weight: bold;
    color: red;
    background-image:
url(images/buttonface-down.jpg);

    background-repeat:
no-repeat;
}

Here’s the markup for three stacked
buttons:


<div id=”menu”>
<ul>
<li><a href=”link1.html”>Button
1</a></li>
<li><a href=”link2.html “>Button
2</a></li>
<li><a href=”link3.html “>Button
3</a></li>
</ul>
</div>

This example uses one background image
(buttonface-up.jpg) for the link, visited, and hover button states,
and another image (buttonface-down.jpg) for the active state. The
background images take the place of the background color and border
properties that would normally define the box shape around the
button text. In this case, the link, visited, and hover states are
defined solely by the text color, but you could alter the
background images for each of those states if you want.

In order for the technique to work properly,
the size of the background image must exactly match the box size as
specified in the div#menu li rule, which in this case is 40px X
125px. Also, you need to ensure that the button text fits within
the specified box size without causing the box to expand. Just in
case an overly long text label does cause the box to expand beyond
the specified size, the background-repeat: no-repeat
property will prevent the background image from being repeated to
fill the expanded box.

Now you can create buttons that have the speed
of pure CSS text buttons but also posses the dimensional look of
traditional graphic buttons. About the only design compromise you
must make with this hybrid button technique is to use regular Web
fonts for the button text. The small size of button text usually
limits the font selection anyway, so that isn’t much of a
sacrifice.