WEB前端开发

演示地址：http://www.9demo.com/demo/css_button/css_button.htm

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

HTML:

<a class=”button” href=”#”><span>按钮文字</span></a> 
设置按钮样式：

CSS:

<style type=”text/css”>  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; }  </style> 
为按钮添加点击样式：

CSS:

<style type=”text/css”>  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 */ }  </style> 
由于 IE 下点击后不能还原到默认状态，因此，我们需要在标签里添加一段代码：

HTML: <a class=”button” href=”#” onclick=”this.blur(); return false;”><span>按钮文字</span></a> 
如果你需要用它提交表单（FORM），那么可以在 onclick 里面添加一个提交语句，如：document.forms['theForm'].submit();

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《用CSS美化按钮（button）》