MainelyDesign.com Blog

Best CSS Method for Using Image as Submit Button

Posted on 02/03/2010 at 12:17 pm by Kevin Wentworth
Viewed 21,624 times | 2 comments

I came across an interesting issue with web forms and CSS.  Surprisingly, the end result is much better than I expected.  I knew that using an image instead of a traditional form submit button (<input type="submit">; instead of <input type="image"> or <input type="button">) would be a little challenging.  I like a challenge, plus I wanted to use the submit button because it's the standard approach to forms and I remember reading somewhere that input's of type image or button do not submit when you press enter...a usability faux paus in my opionion.

CSS to Make an Image Act Like a Submit Button

Just a little bit of redundant CSS coding (not a hack, I swear) and you are on your way to using a background image instead of a traditional input submit button.  Working CSS code:

How does it work? Background-Image for a Submit Button Explained:

• First thing you do is hide the "Submit" button text by using a negative text-indent. (You can also use padding but that has a hack involved)
• This works for the modern browsers, except IE. (are you surprised?)
• To get IE to play nice, you make it display as a block, then text-indent will work.
• For good measure, you should also set the font-size to 0 and the line-height to 0. (Thanks to ProductiveDreams.com)
• And to be certain, I defined the width and height of the image, set overflow to hidden and made the font color transparent.
• For usability, I made the hand cursor appear, just so customers would know to click on the button.

Cross-Browser Support

This works pretty well across the major browsers.  Nothing too tricky, no hacks.  The only browser I've found that it didn't work on (the "Submit" text was still displayed, but really small) was Opera 9.1.  Now, that browser is from 2006.  It's kind of a fluke that I even have that browser working on a computer.  Plus, it worked perfectly on the latest Opera mini browser. With that caveat, this is a cross-browser compatible method for using an image as a submit button (instead of those pesky inputs of type image).

Cheers,
-Kevin Wentworth