用CSS滑动门技术制作精美的按钮

162天12小时1分钟前

来源: 原创

这片文章将告诉你如何用CSS滑动门技术（Sliding Doors Techniques）去制作一些精美的button。用这种技术比用图片好是因为，你可以同时将样式应用到所有的链接上而不用为每个链接都制作图片。我之前发布这篇文章在Morning Break的网志上，不过由于这片文章很受欢迎，所以我决定发布在这里。

什么是滑动门技术？

这个技术非常简单。假如我们想要一个不定宽度的按钮，我们就必须找到一种能够水平伸缩它方法。我们将通过制作两张用作定义按钮的背景图来完成它：一个是为左边准备的，另一个是为右边的——就像下面这张图一样。

左边右边

右边比较小的图片将在左边较大的图片上滑动（这就是我们把它叫做滑动门的原因）。右边的图片向左边滑动的越多，按钮就会越小，反之亦然。下面的图片说明了这个原理。

为按钮加上样式

首先大致看下模拟按钮的HTML代码。我们将标签包裹在标签之中。包含左边宽点的图片和文本。文本的宽度将决定按钮的尺寸。

Submit

再看一看相关的CSS代码。我们将.button类应用于标签上，.button span 类应用于在元素中的标签里。同时我们还要用a.button:hover span给标签中的内容加上悬停时需要改变的样式.就这么多。很简单，嗯？下面代码中的注释应该写的比较明白了。

a.button {

/* 右边滑动的图片 */

background: transparent url('button_right.png') no-repeat scroll top right;

display: block;

float: left;

height: 32px; /* 根据图片的height属性改变这个值 */

margin-right: 6px;

padding-right: 20px; /* 根据图片的width属性改变这个值 */

/* 字体属性 */

text-decoration: none;

color: #000000;

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

font-weight:bold;

}

a.button span {

/* 左侧的背景图 */

background: transparent url('button_left.png') no-repeat;

display: block;

line-height: 22px; /* 根据按钮的heith属性改变这个值 */

padding: 7px 0 5px 18px;

}

a.button:hover span{

text-decoration:underline;

}

结果将跟下面的例子相似。

UPDATE更新（2008.05.41）: 大家可以“动态的”调试这个按钮示例页

I've made a few more designs that you can use with the CSS code above. Each design consist of two images, like in our example. Enjoy!

我制作了一些你可能用到的图片，跟我们的例子一样每个设计都包括两张图。希望大家喜欢！

1.

2.

3.

4.

5.

6.