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 17,029 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:

  1. div.submit input {
  2.     background-image: url(../img/template/express-form-go.gif);
  3.     background-repeat: no-repeat;
  4.     color: transparent;
  5.     border: 0;
  6.     text-indent: -1000px;
  7.     display: block;
  8.     font-size: 0px;
  9.     line-height: 0px;
  10.     width: 98px;
  11.     height: 42px;
  12.     overflow: hidden;
  13.     cursor: pointer;
  14.     cursor: hand; /* for IE 5.x */ 
  15. }

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

Bookmark and Share

Tags for Best CSS Method for Using Image as Submit Button

Css | Example | Ie | Internet Explorer | Tutorial | Web Design | Usability | Hack

Comments for this Posting

Posted by manish k

on 26/3/10

Hey its works like WOW,

Searched on number of blogs , you mentioned solution very clearly.

Surprised to see that this will be first the first comment.




Posted by Kevin Wentworth

on 26/3/10

@manish k: Thanks! Glad it worked for you.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design