原文: CSS Image Replacement for Buttons

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:

Disable style sheets

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;
}

译文: CSS按钮的图片替换

根据Mike Rundle 与Seamus P. H. Leahy的css图片替换的扩展技术和WebDesign-L mailing list中发布的一个帖子，我发掘了一个提交按钮和按钮标签的图片替换方法。

当样式表处于活动状态时，你就可以通过这个方法创建一个可点图像。在样式表关闭状态时，你可以创建一个标准按钮。秘诀就是将图片替换方法应用于按钮标签，并将它作为提交按钮使用。由于按钮边框已经被去掉了，所以可以将链接的按钮指针设置成手的形状，这样可以给用户一个明确的提示。

你看过运用Google 搜索框使用两种不同的方法的示例吗？这个适用于所有可以进行图片替换的浏览器：Firefox/Mozilla, IE 5/6, Opera 7/8, Konqueror 3.4 & Safari (特别感谢Philippe Wittenbergh提供的Mac 浏览器反馈信息)。

效果预览：http://www.ampsoft.net/webdesign-l/image-button.html

使用文本缩进来进行图片替换

 Search with Google

通过上间隙属性进行图片替换

 Search with Google

你可以通过下面的按钮看到没有CSS支持的页面：
Disable style sheets

注意：Google搜索框只是做为示例来使用的。Google 和 the Google logo 是Google 公司的标志。

现有问题

由于一些原因，在Opera中，不能够运用两种方法将指针应用于按钮。所以Opera的用户不能够使用这个指针。

在Internet Explorer中，如果按钮是如果按钮是父模块中的第一个元素，那么第一个方法将不可用。在按钮前添加一些内容（比如&nbsp）或者设置一些不显示的模块，可以解决这个问题。

Internet Explorer并不能够很好地处理提交按钮的名称属性。这通常是不相关的，除非你的一些脚本需要处理它的值。这里有一篇关于IE提交按钮问题的的文章（感谢Malcolm Campbell提供）。

CSS代码

#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;
}