Introduction
Consider, if you will, the lowly form button ... the familiar, dreary workhorse of online forms:
Not much to look at, are they? It used to be that buttons were simple slabs that looked like bricks in a polished design. Now they're at least rendered with a shadow and rollover effect. Still, you're stuck with anonymous black-on-grey, and the size is almost always too big for the page. If you're going to the trouble to control everything else, why stop when it comes to form buttons? Why not tweak them into something like this:
This isn't just for novelty's sake. My company was committed to providing selectable themes for a version of our Web-based reporting tool. We labored to create clear, clean, fully unified themes, and the default browser buttons really dinged our designs. We also have customers who are still running older version of IE, so documentation screen shots would appear differently than on their display screens. Applying styles to the buttons resolved both problems; they looked better and were the same with all versions.
Form elements, including buttons, are subject to styles like anything else on the the page. There are a few quirks to watch out for, but with very little effort you can escape the default brick or pillow look.
Text Color, Family, Size, and Weight
Our starting point is the default input button, as rendered by your browser:
Create a class in your style sheet, using the color and font properties to control the label text. Then assign the style to the input element by adding a class attribute.
This looks fine under Firefox, but IE users will immediately see a problem: font-size: small produces very large text. IE's sizing algorithm treats absolute values such as x-small and small much differently in input elements than in normal page text. To provide a size that scales appropriately, it's best to use a percentage value.
Background Color, Borders, and Gradients
Next, let's apply a background color.
Whoops! Under both IE and Firefox, we're suddenly back to the days of beveled bricks. Apparently, the browser's ability to render button shading is limited to the default background color. But we can work around that. The first thing to fix is that heavy 3D edge. We can do that by defining a single-pixel border. Notice the change in color value from top-left to bottom-right, to maintain a subtle shadow effect.
Next, for users of Windows IE5 and later, we can create background shading through Microsoft's gradient filter, a "procedural surface" that blends colors for smooth transitions. It's defined as a filter property with the rest of the styles.
The GradientType filter specifies the blend direction; 0 means top-to-bottom and 1 means left-to-right. StartColorStr and EndColorStr are entered as octets, with the first two hex values controlling opacity. For a good top-down shadow, specify full opacity (ff) and go from white (ffffff) down to the tint of your choice. Because this filter is an IE-under-Windows feature, Mac and Firefox users won't see it. They will still see the previously defined background color.
Rollovers
At this point our button is looking good, but the expected mouseover effect has been lost; an orange border when the mouse hovers over the button. This visual cue disappeared when the background color was applied. To recreate the effect, add a class to hold the colors of the mouseover borders. Then add mouseover and mouseout events to the input element, to apply and remove the extra border colors:
Within onmouseover and onmouseout, the use of this passes a reference to the input element, whose className is changed to the specified value. Why specify both btn and btnhov for onmouseover? If we had only used btnhov, all the other settings for color, font, background, etc. would have reverted to the system defaults. We have to maintain the btn set of styles, then add btnhov to override the btn border color. Then we reassert btn when the mouse moves away, which clears out the btnhov borders.
If you're obliged to support old browsers, such as Netscape 4, use of the className property could cause indigestion. To avoid errors during mouseovers, you might want to move the className reference to a JavaScript function that checks support for the property before using it:
In case you're wondering, when the disabled attribute is used with a styled button, its label is greyed-out and any onmouseover and onmouseout events are ignored:
Other Form Elements
We've been focused on buttons, but other form elements such as radio buttons, check boxes, and selectors can also be styled. However, the results might not be what you had in mind. Radio buttons and check boxes become dressed up in ways that don't particularly improve their appearance. And since selectors cannot display gradient blends, they look best when left alone or when matched with a flat button color.
| Normal: | ||||
|---|---|---|---|---|
| Styled: |
As always, experiment, explore...and exercise good design principles.
About the Author
M.C. Matti is a usability analyst at SAS, working on Web-based business intelligence applications. He's the keeper of matti.net.
Original: March 27, 2003
Find a programming school near you