MCP4

In this new “Getting your hands dirty” series I hope to show people some handy work-arounds, hacks and oddities.

In this first instalment, we are going to be cover, how to style the <form> Submit Buttons. In comparison to styling input fields, there is very little information out there.

Doing a Google search returns 200K+ results, versus 126,000,00 for styling input fields! Even then, most of the methods involve,

• Using <a> or <span> and then form.submit();
• Using Javascript to do a dynamic image replacement.
• Using an <input> type “Image“

These method have advantages (images can look great), but also have serious disadvantages (usability problems, Javascript requirements, lots & lots of CSS, etc…)

So lets talk about an alternative method, using backgrounds and gradients. The big advantages of this method are,

• Requires very little CSS, very little images, thus faster to download.
• Works even if Javascript is disabled.
• Degrades gracefully in older browsers

Lets make a first stab at it in Example 1,

input[type=submit] /*apply to Submit buttons only */
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

In this example we are using an attribute selector, however as IE 6 doesn’t support this and we want cross platform support as much as possible, lets use the standard class method.

In Example 2, we have added a class attribute to the submit button. Looking good.

.button
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

Next, in Example 3, lets use the “hover” attribute to give a Rollover style effect.

.button
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

.button:hover
{ /* change background when mouse hovers over */
    background: url(img/basic_on.gif) repeat-x;
    height: 30px;
    border: 2px solid #000;
}

Note: IE6 (and below) do not support “hover” on anything but links, so no roll overs in IE 6.

Finally, in Example 4, lets put it all together and show a couple of variations. Go here to see how the buttons are rendered in IE 6.

Conclusion
Using simple CSS techniques you can achieve great looking Submit Buttons, without using heavy weight Javascript and without the usability problems of Image buttons. Kevin Hale also has a great blog an alternative approach using button elements instead.
Download: Examples

Hope you found this first “getting your hands dirty” tutorial useful.

Next Blog: MCP4: A S.E.O. exercise, part 1.

Robert