使用CSS自定义按钮样式

 

看烦了默认的按钮样式吗？我们可利用滑动门（Sliding doors）来实现替换传统button样式，我们先看看在不同系统下默认的按钮样式：

 

实现的最终效果：Click me!

第一步，在html加入下面代码：（假设你会使用copy & paste）

<button value="submit" class="submitBtn"><span>I'm a button.</span></button>

第二步，在你的CSS文件中加入如下部分：

button {border:0; cursor:pointer; font-weight:bold; padding:0 20px 0 0; text-align:center;width:auto; overflow:visible;}
button span {position:relative; display:block; white-space:nowrap; padding:0 0 0 20px;}
button.submitBtn {background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.2em;}
button.submitBtn span {height:30px; line-height:30px;background:url(images/btn_blue_left.gif) left no-repeat;color:#fff;}
button.submitBtn:hover {background:url(images/btn_blue_right_hover.gif) right no-repeat;}
button.submitBtn:hover span {background:url(images/btn_blue_left_hover.gif) left no-repeat;}

其中width:auto; overflow:visible;是针对在IE下按钮偏移问题作的修正，不影响在FF下的效果。非常遗憾的是，在IE下如要有hover的效果，必须增加额外的Javascript才能实现！

第三步，将本文提供的压缩包中的4幅图片放在你的images文件夹中，如果代码没有放错的话，现打开浏览器便可看到了。这个效果的实现就完成了，你可以根据自己的需要来替换这4幅图片。

下载此实例