ASP 3.0/.NET Developer Jupitermedia US-NY-New York Post A Job | Post A Resume

Biz Resources Ecommerce Hosting Dedicated Server Hosting Data Recovery Services Developer News MicrosoftÂ’s Automated Agent: Can We Talk? Borland Finally Sells CodeGear Red Hat Heads For The JON 2.0

Sylish Buttons

Introduction

Consider, if you will, the lowly form button...the familiar, dreary workhorse of online forms:

Not much to look at, are they? Until recent versions of IE and Mozilla, buttons were simple slabs that looked like bricks in a polished design. Now they're at least rendered with rounded corners, and with a shadow and rollover effect. Still, you're stuck with anonymous black-on-beige, 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 IE5, 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 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:

<input type="button" value="Submit" />

Create a class in your style sheet, using the tried-and-true color and font properties to control the label text. Then assign the style to the input element by adding a class attribute.

[CSS]
input.btn{
   color:#050;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:small;
   font-weight:bold;}

[HTML]
<input type="button" value="Submit" class="btn" />

This looks fine under Mozilla/Firebird, 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.

[CSS]
input.btn{
   color:#050;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;}

Background Color, Borders, and Gradients

Next, let's apply a background color.

[CSS]
input.btn{
   color:#050;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#fed;}

Whoops! Under both IE and Mozilla/Firebird, 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 3-D edge, by defining a single-pixel border. Notice the change in color value from top-left to bottom-right, to maintain a subtle shadow effect.

[CSS]
input.btn{
   color:#050;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#fed;
   border:1px solid;
   border-top-color:#696;
   border-left-color:#696;
   border-right-color:#363;
   border-bottom-color:#363;}

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.

[CSS]
input.btn{
   color:#050;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#fed;
   border:1px solid;
   border-top-color:#696;
   border-left-color:#696;
   border-right-color:#363;
   border-bottom-color:#363;
   filter:progid:DXImageTransform.Microsoft.Gradient
      (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');}

GradientType 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 Mozilla/Firebird 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 pointer is hovered. This visual cue disappeared, like the rounded corners, 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:

[CSS]
input.btnhov{
   border-top-color:#c63;
   border-left-color:#c63;
   border-right-color:#930;
   border-bottom-color:#930;}

[HTML]
<input type="button" value="Submit" class="btn"
   onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/>

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 Navigator 3 or 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:

[SCRIPT]
<script type="text/javascript"><!--
function hov(loc,cls){
   if(loc.className)
      loc.className=cls;}
//--></script>

[HTML]
<input type="button" value="Submit" class="btn"
   onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" />

In case you're wondering, when the disabled attribute is used with a styled button, its label is greyed-out and its onmouseover and any onmouseout events are ignored:

<input disabled type="button" value="Submit" class="btn"
   onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" />

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, and can be reached at mimatt@sas.com.