轻舟网络

原理：使用a 标签模仿Button 效果，此类做法灵活，适合可变长Button。

效果图：

利用滑动门

为了让我们制作的按钮具有灵活性，我们必须要让背景图片自动适应按钮的文字的宽度，为此，我们要使用滑动门技术，将两张背景图片合并成一张背景图片。按钮将使用a标签和span标签，他们分别使用背景图片的不同部分，html代码是这样的：

<a class="button" href="#"><span>search</span></a>

没有什么超乎寻常的事发生,对吗？我们需要设计出简单明了的按钮，下面是我的想法：

每张图将包含按钮的两个状态，既普通和按下。我们把两种状态的图片交替的垂直排列，这个css技巧可以不用任何javascript脚本来完成变化，下面我们将使用滑动门技术，为了让按钮自适应文字的宽度，我们将图片做的宽一些，比如300px,高24px：

• span背景图片:
  
  
• ａ背景图:
  
  

按钮样式 (延伸阅读：http://www.designdetector.com/demos/buttons-padding-demo.html Buttons Padding Demo)

最后我们将用css把这一切整合起来：

a.button {
background: transparent url('images/btn_a_image.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;
text-decoration: none;
}

a.button span {
background: transparent url('images/btn_span_image.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

注意 span的上下padding值分别是5px和5px,line-height是14px，加起来正好是按钮的高度24px。用不同的padding值，意味着就要设置不同的height。
现在我们已经做好了一个漂亮的按钮了，但是，当我们按下的时候他没有任何变化，让我们完成最终的效果：

a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* 去掉在Firefox下四周的虚线 */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* 让文字向下移1像素 */
}

部分文字来源：http://www.webkey.cn