收藏：如何用css滑动门制作有趣的按钮

这个技巧将教你如何用css做出漂亮的文本按钮，有活力的按钮将节省你很多制作图片的时间。当然不管这个按钮实不实用，起码可以让我们从中学到一些CSS的技巧！同时学习一下CSS的滑动门技术（sliding doors technique）。让我们一起看看效果。

滑动门

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

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

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

span　　　　　　　　　　　　　　　　　　　ａ

按钮样式

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

注意 span的上下padding值分别是5px和5px,line-height是14px，加起来正好是按钮的高度24px。用不同的padding值，意味着就要设置不同的height。

现在我们已经做好了一个漂亮的按钮了，但是，当我们按下的时候他没有任何变化，让我们完成最终的效果：

最后我们还得针对IE修改一下，因为在IE下不会返回按钮到正常状态，当按扭释放时，我们要强制此种行为，需要添加一点点的JavaScript标记：

所有的都完成了，点击查看效果吧！。