HTML中button怎么填充GIF,用 CSS 让你的按钮（button）更加迷人

这篇文章教你用 CSS 制作漂亮的有点击效果的按钮，明白了原理，相信你也可以制作更加丰富的效果。

我们用 A 包含一个 SPAN 标签来实现此效果：

按钮文字

设置按钮样式：

a.button {

background: transparent url('bg_button_a.gif') no-repeat scroll top right;

color: #444;

display: block;

float: left;

font: normal 12px arial, sans-serif;

height: 24px;

margin-right: 6px;

padding-right: 18px; /* sliding doors padding */

text-decoration: none;

}

a.button span {

background: transparent url('bg_button_div.gif') no-repeat;

display: block;

line-height: 14px;

padding: 5px 0 5px 18px;

}

为按钮添加点击样式：

a.button:active {

background-position: bottom right;

color: #000;

outline: none; /* hide dotted outline in Firefox */

}

a.button:active span {

background-position: bottom left;

padding: 6px 0 4px 18px; /* push text down 1px */

}

由于 IE 下点击后不能还原到默认状态，因此，我们需要在标签里添加一段代码：

按钮文字

如果你需要用它提交表单(FORM)，那么可以在 onclick 里面添加一个提交语句，如：document.forms[‘theForm’].submit();

为了方便学习，本文并未完整翻译，如果你有兴趣，请直接浏览原文。