网页按钮设计：三种风格及CSS实现

本文更新于2016年7月9日，已将标签替换为标签，以符合现代无障碍最佳实践。如果您正在处理按钮，请始终坚持使用标签。

按钮是任何网页最重要的组成部分之一，它们具有许多不同的状态和功能，所有这些都需要与之前的设计决策正确匹配。在本文中，我们将介绍三种按钮设计理念，以及CSS代码和工具，以帮助新开发者创建自己的按钮。

在深入探讨各种按钮设计理念之前，我们需要回顾一下CSS按钮的一些基础知识。如果您不知道哪些CSS组件会发生变化，那么了解扁平化UI和Material Design在思想上的差异就毫无意义。

让我们快速回顾一下CSS按钮的基础知识。

关键要点

• 使用标签是现代无障碍最佳实践中处理按钮的推荐方法。
• 良好的按钮设计应确保无障碍性，按钮应易于残疾人和使用旧版浏览器的用户访问，并应包含简单的文本，以便用户立即理解按钮的目的。
• 按钮设计的三个主要基本要素是颜色、阴影和过渡时间，这些可以使用CSS伪类（如:hover和:active）进行操作。
• 本文提供了三种按钮样式的示例：简单的黑白按钮、扁平化UI按钮和Material Design按钮，每种都有其独特的设计方法。
• 要创建您自己的按钮设计，建议使用CSS3 Button Generator之类的工具。

CSS按钮基础

良好按钮的定义因网站而异，但存在一些非技术性标准：

1. 无障碍性 – 这是最重要的。按钮应该易于残疾人和使用旧版浏览器的用户访问。网络的开放性是美丽的，不要用粗心的CSS破坏它。
2. 简洁的文本 – 保持按钮内的文本简短明了。用户应该能够立即理解按钮的目的以及它将把他们带到哪里。

您在线上看到的几乎所有按钮都会使用颜色变化、转换时间以及边框和阴影变化的一些变体。这些可以使用各种CSS伪类来利用。我们将重点介绍其中的两个——:hover和:active。:hover伪类定义了当鼠标悬停在对象上时CSS应该如何变化。:active最常在用户按下鼠标按钮和释放鼠标按钮之间执行。

可以使用伪类更改按钮的整个显示，但这并不是一种用户友好的方法。对于初学者来说，一个好的策略是在保持按钮熟悉性的同时，对按钮的基本要素进行小的或简单的更改。按钮的三个主要基本要素是颜色、阴影和转换时间。

基本要素1——颜色

这是最常见的变化。我们可以更改各种属性的颜色，最简单的属性是color、background-color和border属性。在我们跳转到示例之前，让我们首先关注如何选择按钮颜色：

1. 颜色组合 – 使用互补的颜色。Colorhexa是一个查找哪些颜色可以一起使用的绝佳工具。如果您仍在寻找颜色，请查看Flat UI颜色选择器。
2. 匹配您的调色板 – 通常最好匹配您正在使用的任何调色板。如果您仍在寻找调色板，请查看lolcolors。

基本要素2——阴影

box-shadow允许您在对象周围添加阴影。可以为每一侧添加独特的阴影，扁平化UI和Material Design都利用了这个想法。要了解更多关于box-shadow的信息，请查看MDN box-shadow文档。

基本要素3——过渡持续时间

transition-duration允许您为CSS更改添加时间刻度。没有转换时间的按钮会立即更改为其:hover CSS，这可能会让用户感到反感。本指南中的许多按钮都利用转换时间来营造自然感。

以下示例在:hover时以柔和的方式（超过0.5秒）转换按钮样式：

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

运行转换的代码很复杂，因此旧版浏览器对转换的处理方式略有不同。因此，我们需要为旧版浏览器包含供应商前缀。

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

删除默认按钮样式

为了从元素中去除默认的浏览器样式，以便我们可以为它们提供自定义样式，我们包含以下CSS：

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

但是，最好将其应用于按钮元素上的类，而不是默认情况下应用于所有按钮。

有很多复杂而有趣的方法可以修改转换如何更改您的CSS，本快速回顾只涵盖了基础知识。

三种按钮样式

1 — 简单的黑白按钮

这通常是我在我的副项目中添加的第一个按钮，因为它的简洁性适用于各种各样的样式。此样式利用了黑白的自然完美对比。

这两种变化非常相似，因此我们只将介绍带有白色背景的黑色按钮的代码。要获得另一个按钮，只需翻转每个白色和黑色即可。

.suit_and_tie {
  color: white;
  font-size: 20px;
  font-family: helvetica;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 20px;
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
  background-color: black;
  padding: 4px 30px;
}

.suit_and_tie:hover {
  color: black;
  background-color: white;
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
}

在上面的样式中，您会看到字体和background-color在.2s的转换持续时间内双向变化。这是一个非常简单的示例。要从此处构建，您可以使用您最喜欢的品牌的颜色作为灵感。使用BrandColors是一个查找此类品牌颜色的好方法。

2 — 扁平化UI按钮

扁平化UI专注于极简主义，并通过小的动作讲述一个大的故事。一旦我的项目开始成形，我通常会从黑白按钮迁移到扁平化UI按钮。扁平化UI按钮足够简洁，可以融入大多数设计中。

让我们通过添加按钮移动来模拟3D按钮，从而改进我们之前的按钮。

此示例包含五个按钮，但由于唯一的变化是颜色，我们将重点关注第一个按钮。

.turquoise {
  margin-right: 10px;
  width: 100px;
  background: #1abc9c;
  border-bottom: #16a085 3px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.turquoise:hover {
  opacity: 0.8;
}

.turquoise:active {
  width: 100px;
  background: #18B495;
  border-bottom: #16a085 1px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

此按钮有三种状态，常规（无状态名称）、:hover和:active。

值得注意的是，:hover只包含一行代码，降低不透明度。这是一个有用的技巧，它可以使按钮看起来更轻，而无需您找到一种新的、实际上更轻的颜色。

CSS变量并不新鲜，但有一些是以新的方式使用的。border不是实心均匀线，而是使用border-bottom、border-left和border-right来创建3D深度效果。

扁平化UI按钮大量利用:active。当我们的示例按钮变为:active时，会发生两件事。

1. border-bottom从3px更改为1px。这会导致按钮下方的阴影缩小，并将整个按钮对象向下移动几个像素。虽然简单，但这一个变化有助于用户感觉他们正在将按钮点击到页面中。
2. 颜色发生变化。背景颜色变暗，模拟物理上远离用户并进入页面的运动。同样，这种细微的变化提醒用户他们正在点击一个按钮。

扁平化UI按钮重视讲述大故事的简单和最小的动作。许多使用border-bottom来创建浅层运动。值得注意的是，一些扁平化UI按钮根本不移动，只利用颜色变化。

3 — Material Design

Material Design是一种设计理念，它推广信息卡片，并具有引人注目的动作。Google设计了“Material Design”的概念，并在Material Design主页上列出了三个主要原则：

• Material是一种隐喻
• 大胆、图形化、有目的性
• 运动赋予意义

为了更好地了解这三个原则，让我们看看Material Design的实际应用。

注意：此示例不包含标签，因为它遵循Polymer的按钮默认标记，但是如果您在一个大型项目中实现Polymer，那么值得探索在您的实现中使用标签而不是标签。我们将在未来的文章中更详细地探讨这一点。

这些按钮利用了两个主要思想——box-shadow和Polymer。

Polymer是一个组件和工具框架，用于帮助设计网站。如果您熟悉Bootstrap，Polymer非常相似。上面找到的强大的涟漪效果只需一行代码即可添加。

  
SUBMIT
    

是一个Polymer组件。通过在HTML的开头导入Polymer，我们可以访问流行的框架及其组件。在Polymer项目主页上了解更多信息。

现在我们了解了Polymer是什么以及涟漪来自哪里（它的工作原理是另一个故事），让我们讨论一下有助于实现Material Design原则的CSS，使按钮脱颖而出。

body {
  background-color: #f9f9f9;
  font-family: RobotoDraft, 'Helvetica Neue';
}

/* Button */
.button {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 32px;
  line-height: 32px;
  border-radius: 2px;
  font-size: 0.9em;
  background-color: #fff;
  color: #646464;
  margin: 20px 10px;
  transition: 0.2s;
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button:active {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

/* Misc */
.button.grey {
  background-color: #eee;
}
.button.blue {
  background-color: #4285f4;
  color: #fff;
}
.button.green {
  background-color: #0f9d58;
  color: #fff;
}
.center {
  text-align: center;
}

这些按钮使用box-shadow来实现大部分设计。让我们研究一下box-shadow如何变化并发挥其魔力，方法是删除任何不更改的CSS：

.button {
  transition: 0.2s;
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button:active {
  transition-delay: 0s;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}

box-shadow用于在每个按钮的左侧和底部放置一个薄薄的暗影。单击时，阴影会延伸得更远，并且变得不那么暗。此动作模拟了从页面跳到用户面前的按钮的3D阴影。此动作是Material Design样式及其实际应用原则的一部分。

可以通过将Polymer与box-shadow效果相结合来制作Material Design按钮。

• Material是一种隐喻——通过利用box-shadow，我们可以模拟现实世界对象中出现的3D阴影
• 大胆、图形化、有目的性——这对于明亮的蓝色和绿色按钮更真实，并且这些按钮完全满足了这一点。
• 运动赋予意义——使用Polymer和box-shadow转换，我们可以在用户单击按钮时创建大量运动。

本文介绍了如何使用三种不同的设计方法制作按钮。如果您想制作自己的按钮设计原型，我建议您使用CSS3 Button Generator。

结论

黑白按钮简单可靠。将黑色和白色替换为您品牌的颜色，即可快速获得与您的网站相关的按钮。扁平化UI按钮很简单，并利用小的动作和颜色来讲述大的故事。Material Design按钮利用大规模的复杂动作来模拟现实世界的阴影，从而吸引用户的注意力。

希望本指南能帮助CSS新手了解使按钮如此强大和创造性广泛传播的构建块。

关于现代CSS按钮的常见问题

如何创建一个简单的CSS按钮？

创建简单的CSS按钮包括在您的CSS文件中定义一个类，并将其应用于HTML文件中的按钮元素。例如，您可以在CSS文件中定义一个.button类，其中包含background-color、color、border、padding、text-align、text-decoration、display和cursor等属性。然后，在HTML文件中，您可以创建一个按钮元素并将.button类应用于它。这将根据.button类中定义的属性来设置按钮的样式。

如何向CSS按钮添加悬停效果？

可以使用:hover伪类向CSS按钮添加悬停效果。此伪类用于选择和设置当用户指针悬停在其上时元素的样式。例如，当用户指针悬停在其上时，您可以更改按钮的背景颜色和文本颜色，方法是在按钮类的:hover伪类中定义这些属性。

如何创建带有图标的CSS按钮？

带有图标的CSS按钮可以通过使用图标字体或SVG图标来创建。Font Awesome等图标字体提供了各种易于使用CSS设置样式的图标。要使用图标字体，您需要在HTML文件中包含图标字体的CSS文件，然后使用您要使用的图标的相应类。另一方面，SVG图标可以直接嵌入到HTML文件中并使用CSS设置样式。

如何创建带有渐变的CSS按钮？

可以使用linear-gradient()函数或radial-gradient()函数创建带有渐变的CSS按钮。这些函数分别用于定义线性渐变或径向渐变。渐变由两个或多个颜色停止点定义，这些颜色停止点是渐变在其间转换的颜色。颜色停止点由颜色和沿渐变线的颜色位置定义。

如何创建带有圆角的CSS按钮？

可以使用border-radius属性创建带有圆角的CSS按钮。此属性用于定义边框角的半径。border-radius属性的值可以用像素或百分比指定。较高的值将创建更圆的角。

如何创建带有阴影的CSS按钮？

可以使用box-shadow属性创建带有阴影的CSS按钮。此属性用于将阴影效果应用于元素。box-shadow属性采用多个值，包括阴影的水平偏移量、垂直偏移量、模糊半径、扩展半径和颜色。

如何创建带有过渡的CSS按钮？

可以使用transition属性创建带有过渡的CSS按钮。此属性用于控制当用户将鼠标悬停在按钮上或单击按钮时，从一种样式更改为另一种样式的速度。transition属性采用多个值，包括要转换的属性、转换的持续时间、计时函数和延迟。

如何创建带有动画的CSS按钮？

可以使用animation属性和keyframes规则创建带有动画的CSS按钮。animation属性用于指定动画的名称、持续时间、计时函数、延迟、迭代次数、方向、填充模式和播放状态。keyframes规则用于为动画的每个阶段指定样式。

如何创建响应式CSS按钮？

可以使用媒体查询创建响应式CSS按钮。媒体查询用于为不同的设备或屏幕尺寸应用不同的样式。例如，您可以定义一个媒体查询，该查询会更改宽度小于600像素的屏幕的按钮的大小、填充和字体大小。

如何创建具有不同形状的CSS按钮？

可以使用border-radius属性和transform属性创建具有不同形状的CSS按钮。border-radius属性可用于创建圆形或椭圆形按钮。transform属性可用于旋转、缩放、倾斜或平移按钮。