This article originally appeared in the Design & Usability Tactics newsletter. Click here to subscribe automatically.
Creating a button by superimposing CSS-styled text over a graphical background image combines the speed and lightweight markup of CSS rollover effects with the rich dimensional appearance of a graphical image of the button face.
These graphical/CSS hybrid buttons are faster to create and load than regular graphical buttons because you need to create and load only one image for the blank button face, rather than separate images for each button. The same image serves as the background for all the buttons on your page. The text labels for the buttons are simply CSS-styled text.
The problem with preloads
One of the few problems with graphical/CSS hybrid buttons is that there are some limitations on rollover effects. The simplest way to employ the technique is to confine your rollover effects to the CSS-styled text and use the same button face image for all of the rollover states. This gives you fast, clean rollover effects, but it somewhat limits your design options.
You can also create alternate button images and construct your CSS rules to change the background image for the different rollover states. While this gives you more design flexibility, there’s a delay in the appearance of the alternate button images as the browser loads the image file the first time it’s used (unless you resort to preloading the alternate button images).
The techniques for preloading images are well known and accepted. The problem is that preloading images adds to the time it takes for the page to load and appear in the visitor’s browser. Those first seconds of the user experience are critical, and anything you can do to make the initial page load faster improves the site’s perceived speed and usability. Using graphical/CSS hybrid buttons reduces the time required for image preloads, but it would be even better if preloads could be eliminated.
No-lag rollovers—without preloading images
I’ve found an innovative technique that enables you to have alternate button images for the different rollover states without needing to do any separate preload to any image files. I first encountered this technique in an article on the Web site of Czech Web designer Petr Stanicek.
To achieve a typical button rollover effect, you’d normally create three separate images as shown in Figure A—one for the plain button, one for the hover state, and one for the active state. The image file for the plain button face would be part of the initial page load, but the other two images would have to be preloaded separately in order to have them available in the browser’s cache when the visitor points to or clicks the button.
The no-preload rollover technique works its magic by combining all three button face images into a single image file, as shown in Figure B. Then, instead of specifying different background image files in the CSS rules for each rollover state, you specify a position offset for the composite image. The composite image file loads automatically during the initial page load, so there’s no need for preloads; there’s also no delay while the browser fetches a different image file in order to render the rollover effect.
The combination of an oversized image and background image position offsets enable you to selectively show a different portion of the image file for each button state instead of displaying different image files. The size of the CSS box around the button text determines how much of the background image shows through in the browser. The portion of the image that falls outside the box is clipped and hidden from view. The result is that only one of the three button faces shows at a time.
For this technique to work, you must know the exact horizontal and vertical size of the button face and use those dimensions precisely in creating the image file and the CSS rules for the buttons.
A working example
Listing A is the CSS code for an example of the no-preload rollover technique applied to graphical/CSS hybrid buttons. In this case, the button text is marked up as an unordered list, and the three stacked buttons are contained within a div with the id menu.
Here’s the HTML for the three buttons:
<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>
In the working sample code, note that the div#menu li rule specifies the height and width of the button box, as well as the starting properties for the background image and text. Specifying the line-height to match the height of the box assures that the text will be centered vertically. The background-position attribute controls the position of the upper-left corner of the background image relative to the upper-left corner of the box. A value of 0px 0px positions the upper-left corner of the image to match the upper-left corner of the box.
In the div#menu li rule, the display: block property, in combination with width: 100% and height: 100%, make the full box area clickable instead of just the text.
Finally, in the rules for the individual button states (link pseudo-classes), such as div#menu lia:link, the color and font-weight properties create the text rollover effects, while the background-image and background-position properties do the same for the background image. Setting background-position: 0px -30px for the hover state slides the background image up 30 pixels so that the top button face is hidden and the middle (highlighted) button face appears in the button box. Similarly, setting background-position: 0px -60px for the active state slides the background image up even further to display only the bottom (depressed) button face. The background-image needs to be repeated in each rule.
This technique allows you to achieve the dimensional look of traditional graphic buttons, combined with the speed of CSS text buttons that you get from graphical/CSS hybrid buttons. It also lets you have full-fledged graphical rollover effects without delays or image preloads.