CSS image replacement for submit buttons

Last updated: 2005/11/30

Return to the main page

Expanding the techniques for CSS image replacement by Mike Rundle and Seamus P. H. Leahy, and inspired by a question posted to the WebDesign-L mailing list, I have developed an image replacement method for submit buttons, and in general for the button tag.

Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input. And since button borders are erased, it's also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users.

Here you can see examples of both variants of this method using a basic Google search box. This works in all the browsers in which image replacement works: Firefox/Mozilla, IE 5/6, Opera 7/8, Konqueror 3.4 & Safari (thanks to Philippe Wittenbergh for the feedback about Mac browsers).

Using text-indent for image replacement:

Using padding-top for image replacement:

You can use the button below to see the page without the CSS applied:

Note: The Google search boxes are used only as an example. Google and the Google logo are trademarks of Google Inc.

Known issues

For some reason Opera doesn't process properly the cursor applied to button in both methods, so no handy cursor for Opera users.
The first method fails in Internet Explorer if the button is the first inline content of the parent block element. Adding some inline content before the button (like a simple  ) or setting the element to display:block will solve the problem.
Internet Explorer doesn't process properly the name attribute of a submit button. This is usually irrelevant unless you rely on its value for some script processing. Here is an article about the problem of the submit button in IE (thanks to Malcolm Campbell for the tip).

The CSS code

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(SearchGoogle.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(SearchGoogle.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Return to the main page