您的位置: 首页 / Design / 如何制作一个漂亮的 CSS 按钮

如何制作一个漂亮的 CSS 按钮

Published at May 9, 8pm / Keywords: , ,

CSS Button

如今 Web Application 横行,在 Web 2.0 网站的各种设计元素中,按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法,代码上简洁,符合 XHTML 标准,不需要 Javascript,只需要纯 CSS 即可完成,而且通用性很好,使用起来也很方便。上图即为最终成品的例子,您也可以通过演示页面体验一下。下面我将详述整个制作过程,相信通过这个教程您肯定可以学会。

第一步:准备图片

按钮状态

对于一个好的 UI,一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说,我们需要让按钮相应各种鼠标事件,让用户知道它是可以按下的。如上图,我们要制作的按钮共有三种状态:正常状态鼠标划过鼠标按下。通常情况下,我们会想到利用 onclick、onmouseover 这样的事件来控制,而事实上,我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做,这也是良好设计的原则之一。

为了能够实现这种效果,我们需要准备三个状态的图片。利用 CSS 的 background-position 属性,我们完全可以将三种状态的图片放在一张图片中,这样可以获得更好的缓存效果。

此外,按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要能够自动适应内部文字的长度,因此我们需要应用一种叫做“拉门技术 (Sliding door technique)”的 CSS 技巧。具体原理不讲了,这里只介绍具体做法:

我们使用超链接来生成按钮,为了使用 Sliding door technique,我们需要按照如下方式书写 HTML 代码:

Button Text

随后,我们需要准备两张图片,作为按钮的背景(分别为 span 标签和 a 标签的),具体示意图如下:

背景图及布局示意图

这里需要指出,280px 并不是绝对的,它代表了这个按钮在您的应用中可能用到的最大值。此外,所有的值都可以根据您实际的背景图做出更改。

第二步:书写 CSS 代码

为了能够让 A 标签准确的显示我们需要的效果,我们需要设定其 display 属性为 block,但是,很多情况下,我们需要在同一行中显示多个按钮,我们可以通过设定 float:left 或 float:right 来达到。提醒一下,这样设定後,当您放置完按钮后不要忘记 clear 一下 :)。

首先看看显示基本布局的代码,本例中,两侧圆角部分为 10px,按钮高度为 24px,保留区域为 1px:

a.button {
background: transparent url(a.gif) no-repeat scroll right top;
color: White;
display: block;
float: left;
height: 24px;
padding-right: 10px;
font: normal 12px sans-serif;
margin-right: 10px;
text-decoration: none;
}
a.button span {
background: transparent url(span.gif) no-repeat;
display: block;
padding: 5px 1px 5px 11px;
line-height: 14px;
}

这里需要指出的是:1. 保留区 (1px) 是包含在 SPAN 中的,具体可以注意看 padding 的设置;2. SPAN 的 line-height + padding-top + padding-bottom = A 的 height

经过这样设定后,我们的按钮的基本样式就完成了,但它还没有交互效果,我们通过设定 a:hover 和 a:active 来实现:

a.button:hover {
background-position: right -24px;
}
a.button:hover span {
background-position: left -24px;
}
a.button:active {
background-position: right -48px;
}
a.button:active span {
background-position: left -48px;
padding: 6px 0 4px 12px;
}

我们看到,主要是应用了 background-position 属性调整背景图片的位置,这比使用多张图片效果更好。在 a.button:active span 中,我们重新设定了 padding 的值,使字符向右下方移动 1px,按下的效果更明显,这也是之前提到的保留区的作用。

第三部:最后完善

其实做完上面两部,我们的按钮基本上已经完工了。但是在各种浏览器中都有一个讨厌的问题,就是当超链接被点击后,会留下一个讨厌的虚线框。这个破坏美观的东西,我们当然要干掉它。

Firefox、Safari 等支持 W3C CSS2 的浏览器,可以通过设定 CSS 的 outline 属性来做到这一点。在我们这个例子中,只需做如下改动:

a.button:active {
background-position: right -48px;
outline: none;
}

在 Firefox 中看看,虚框已经消失了。

但 Internet Explore 不吃这一套,对付它就比较麻烦了,单单 CSS 无法解决问题,需要从 HTML 下手。我们需要将按钮的 HTML 代码改为以下形式:

Button Text

这样,我们可以让超链接在点击后迅速失去焦点,从而避免虚框的出现。当然,如果我们应用中按钮比较少,这个方法还不错。但按钮比较多的情况下,我们还是应该用 DOM 方法来为 className 为 button 的 A 修改 onclick 事件(用 jQuery 或 Prototype 实现会很省心),不过这不在本文讨论的范围内了。

到这里,我们的按钮就算做好了,我相信您一定已经学会了。如果还有什么不明白的地方,您可以参考这个简单的范例,查看它的源代码来解决。当然,您也可以直接在本文後提问,我很乐意为您解答。

UPDATE:谢谢 Dan Li 发来邮件提醒,我确实发现本文与这篇文章如出一辙。早看到直接转过来就好了,白白折腾了两个小时。不知道留言中 DV 大侠所指的是不是这篇。不过我在写本文时并没有看过这篇文章,而且本文与原文还是有很大不同,而且原文中 CSS 有误 (background-position 的参数顺序不对),虽然可以实现它所叙述的效果,但不符合 CSS 标准,也不能够进一步扩展,希望看了原文的朋友能够注意。

如需在 CC-BY-NC 协议下引用,请保留以下链接,商业网站引用请与我联系,谢谢合作。http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button

发表您的观点或推荐本文 Loading...