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
font properties to control the label text. Then assign the style to the
input element by adding a
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
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.
GradientType filter specifies the blend direction;
0 means top-to-bottom and
1 means left-to-right.
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.
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
mouseout events to the
input element, to apply and remove the extra border colors:
onmouseout, the use of
this passes a reference to the input element, whose
className is changed to the specified value. Why specify both
onmouseover? If we had only used
btnhov, all the other settings for
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
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
In case you're wondering, when the
disabled attribute is used with a styled button, its label is greyed-out and any
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.
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