︻┳═一 [zsk.akaka.com.cn]

使用 css （sliding doors）制作好看的按钮

今天来说说如何使用 css （sliding doors 技术）制作好看的按钮。

使用 css sliding doors 比使用图案来制作按钮有更大的优势：因为你可以将设定的按钮风格使用到任何的链接上面，而不用针对每个链接制作不同长度的图案按钮。

sliding doors 技术 的原理：

如果我们希望有一个宽度为动态的按钮，我们必须找到一种方法，使按钮的宽度能够按照我们的要求横向拉伸。这时我们需要创建两个按钮图像，通过 css 定义为按钮的左边和右边组成部分，如下图：

左边的图案：

右边的图案：

右边小的图案通过设定放在左边的图案上面，从而形成按钮，这就是 sliding doors 技术。

方法如下：

首先，在 HTML 里要加入按钮的地方加入代码：

链接地址 是要写这个按钮的指向链接，显示文字内容 是写按钮上的文字。

接下来加入 css 代码：

a.button 用来设定按钮右边小的图案是如何放置的及按钮上文字的属性；a.button span 是用来设定按钮左边图案是如何放置的；a.button:hover span 是设定当鼠标移动到按钮上的显示效果。

结果如下图：

当：

效果：

当：

效果：

你可以在 http://zsk.akaka.com.cn/css-sliding.html试试效果。

参考：jankoatwarpspeed
作者：peterzsk
本文永久链接：http://zsk.akaka.com.cn/2008/05/using-css-make-fancy-buttons/
采用CC创作共用协议,转载需保留以上信息并<署名、非商业和保持一致>。

如果您喜欢我的文章，可以订阅我的 谢谢。