如何使用 CSS3 创建酷炫十足的按钮创建按钮, CSS3CSS3, 创建按钮Web 设计, 按钮

注意  本主题受 ZURB.com 上的这篇博客文章的启发并针对 Windows Internet Explorer 9 进行了优化。

利用 层叠样式表 (CSS)，级别 3 (CSS3) 和 Internet Explorer 9，只需少量几个标记，您就可以创建外观非常吸引人的按钮。 本主题演示如何完全利用 层叠样式表 (CSS) 将简单的超链接转换为时髦的按钮。

本主题包含以下几节：

 

• 起点
• 添加圆角
• 添加阴影
• 添加透明渐变叠加
• 作为数据 URI 添加透明渐变叠加
• 汇总
• 相关主题

本主题包括以下 CSS3 功能：

• 使用 border-radius 属性的圆角
• 使用 box-shadow 属性的阴影
• RGBA 颜色值

本主题还包括首次在 Windows Internet Explorer 8 中引入的以下功能：

• 数据 统一资源标识符 (URI)
• 透明 可移植网络图形 (PNG)

起点

在本主题中，我们使用如何使用 CSS3 添加圆角框中的同一咖啡公司示例。 我们会将棕色订单信息水平栏中每个产品描述后的“Order Now!”超链接变成一个按钮。 该订单信息栏当前如下所示：

此规则由以下类选择器定义：

首先，让我们将“Order Now!”超链接变成一个基本的矩形按钮。 为了很好地与其他设计部分进行对比，让我们将此按钮设为蓝色。 我们还将增加订单信息栏的高度，以便容纳更大的按钮。 基本按钮的 CSS 如下所示。 （已声明此选择器，以便具有 product_orderinfo 类的元素中的任何 a 元素都会应用所列的声明。 这将确保此选择器只应用于订单信息栏中的“Order Now!”按钮。）

这将使订单信息栏如以下图像所示：

我们还将添加以下选择器，以便当光标悬停在此按钮上时使其变成棕色：

这将使得当光标悬停在此按钮上时它会如下所示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

现在让我们使用 CSS3 让此按钮熠熠生辉！

添加圆角

首先，让我们为此按钮添加半径为 5 个像素的圆角。 我们通过将 border-radius 属性添加到选择器并将为其分配值 5px 来执行此操作。 为了确保其他常用浏览器也能显示圆角，我们还将添加几个 vendor-prefixed 属性。 这些新行如下所示：

添加这些行后，此按钮现在如下所示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

添加阴影

然后，我们将向此按钮添加阴影。 我们通过将 box-shadow 属性添加到选择器来执行此操作。 如如何使用 CSS3 添加圆角主题中所述，我们需要指定阴影的水平和垂直偏移以及颜色。 我们还可以选择指定模糊距离和延伸距离。

对于此按钮，让我们将水平和垂直偏移指定为 1 个像素，并将模糊距离指定为 3 个像素。 我们会将颜色设置为灰色（十六进制值 #999999）。 为了确保其他常用浏览器也能显示阴影，我们还将添加几个 vendor-prefixed 属性。 这在选择器中如下所示：

这将使此按钮如下所示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

这看起来还行，但阴影没有融入背景色中。 这将导致沿按钮右边框和底边框会产生浅灰色带。 我们可以利用 Internet Explorer 9 的另一个新功能来避免这种情况： RGBA 颜色值。 RGB (red-green-blue) 颜色值是一种用于指定浏览器中的颜色的标准方法。 RGBA (red-green-blue-alpha) 值是相同的，但增加了“alpha”通道（即，透明度）。

我们可以将灰色值替换为一个 RGBA 颜色值，该 RGBA 色值可使阴影变成 50% 透明度的黑色。 这就使阴影能够融入背景色中。 添加 RGBA 颜色值后，选择器的此部分现在如下所示：

这将使按钮如下所示。 现在阴影完美地融入了背景色中：

可以单击此处查看修订过的页面。 还可以下载它的 CSS 文件。

添加透明渐变叠加

最后，我们将添加透明渐变叠加，这样能为按钮表面提供一些纹理。 对此按钮的整个长度方向上重复相同的 1 个像素宽的透明垂直渐变可达到此目的，而不会对带宽造成大的影响。 您可以在常用图像编辑器中创建渐变，或直接使用链接到此处的渐变： gradient.png。

若要将渐变应用到此按钮，请将对渐变位置的引用作为 url() 值添加到 background 属性，并将其设置为使用 repeat-x 值沿水平方向重复此操作，如下面所示：

这将使此按钮如下所示：

为了确保当光标悬停在此按钮上时会有相同的效果，我们将需要通过类似方式更新以下选择器：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

作为数据 URI 添加透明渐变叠加

数据 URI 是首先在 Internet Explorer 8 中获得支持的，它提供了在网页中以内联方式嵌入数据项的能力。 数据 URI 最常见的一个用途是将小图像嵌入网页中。 我们可以通过上一节中所述的透明渐变叠加轻易完成此操作。

第一步是将 PNG 图像转换为 数据 URI。 有很多基于 Web 的解决方案和桌面应用程序可以帮助您完成此操作。 大多数这类方法都需要将图像文件上载到应用程序或者为应用程序指定图像文件，然后由应用程序为您提供要使用的 数据 URI。 文件“gradient.png”的 数据 URI 如下所示：

若要在此按钮上使用 数据 URI，只需将 background 属性值中的文件名 ("gradient.png") 替换为 数据 URI 即可。 background 属性现在如下所示：

我们还可以更新用于定义此按钮在光标悬停在它上面时的行为的选择器，如下所示：

此按钮将如此处所示，与上一个图像相同。 此按钮最大的优点是，它不需要向您的 Web 服务器上载单独的图像文件：

当光标悬停在此按钮上时，此按钮将如此处所示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

汇总

现在您已了解到如何向简单的超链接添加圆角、透明阴影和透明渐变叠加以将它变成时髦的按钮。 完成前面几节中描述的所有更改之后，最终的选择器将按如下方式显示在样式表中：