Developer

Create hybrid graphical/CSS buttons

Learn about graphical buttons, CSS buttons, and the graphical/CSS hybrid button. Michael Meadhra demonstrates how you can create buttons that have the speed of pure CSS text buttons but also possess the dimensional look of traditional graphic buttons.

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.

Editor's Picks

Free Newsletters, In your Inbox