Replacing Form Buttons with Images

So you want to use CSS to style a form button to appear as an image, similar to the way you would with any anchor link (using background-image). While the process is very similar, there are a few odd behaviors that form buttons exhibit that anchor links do not (particularly when viewed in IE6) that require a little extra CSS tom-foolery to get around.

We start with a normal form button that, without any css, looks like what you see above, generated from this html.

<input id="stayConnected" type="submit"/>

And what we want to end up with is a nifty little square with an arrow in it, like you see in the above image.

Using the traditional background-image replacement technique would lead to the following CSS.

input#stayConnected {
    background: url(images/button_submit.png) no-repeat 0 0;
    display: block;
    height: 25px;
    text-indent: -9999px;
    width: 28px;
}

That code forces the submit button to behave as a block, gives it the same dimensions as our arrow button image, applies the image as a background and forces the actual text of the button (submit query) off the screen. In most browsers, this leaves us with basically what we're looking for except that there's a strange border on the edges of the button left-over from the form button (see above). Adding the following line to clear the borders will take care of that, and leaves us with a nice looking button for our sign-up form.

border: 0;

The button looks good now, but in some browsers (Firefox included) it doesn't fully function as we'd like. When hovered over, the cursor does not change to the expected pointer for a link... so we need to add one more line to get things working properly in modern browsers.

cursor: pointer;

After that, hovering over the button behaves as shown in the picture above.

Are we done? Well, like many things in the world, everything looks ok with this technique until you view it in IE6. As you can see above, the majority of our CSS gets properly applied within IE6 except for the negative text-indent, which doesn't work for form buttons in IE6. What to do? Well, we can try shrinking the text infinitesimally and see if that works.

font-size: 0%;

Despite the fact that 0% should mean the font has no size at all, IE6 still renders it, albeit in a very very tiny fashion (shown above). If we replace the font-size declaration with one setting the line-height to zero, however, the text disappears completely and we have a nicely styled image form button that's cross-browser compatible.

line-height: 0;

Below is the complete style used to create the button. As far as I'm aware, it works in all major browsers.

input#stayConnected {
    background: url(images/button_submit.png) no-repeat 0 0;
    border: 0;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 0;
    text-indent: -9999px;
    width: 28px;
}