[CSS] An Introduction to the Basics of Modern CSS Buttons（译）_html/css_WEB-ITnose

原文地址

译：关于现代化 CSS 按钮的基础知识介绍

按钮是构建网页的最重要组件之一，它拥有许多不同的设计方案以匹配不同的状态和功能。在这篇文章中，我们将介绍三种风格的按钮设计思路，通过 CSS 和设计工具来帮助新的开发人员创建他们自己的按钮。

在我们深入了解不同的按钮设计思路之前，我们需要加强一下对 CSS 按钮基础的了解。如果你不了解 CSS 对组件的影响，那么即使了解 Flat UI 和 Material Design 之前的区别也对你没什么帮助。

现在让我们快速的回顾一下基本的 CSS 按钮。

CSS 按钮的基本点

每一个网站对好按钮的定义都有不一样的标准，但还是有一些非技术上的标准：

1. 可访问性– 这是至关重要的。按钮对那些残疾人和旧版本的浏览器也应该有良好的访问性。网络的开放性是很美好的，不要用因偷懒而写的 CSS 毁了它。
2. 简单的文本– 尽可能的简化你的按钮文本。用户应该能够立即了解到这个按钮的作用和按钮跳转的目的地。

几乎所有你在网络上看到的按钮都会用到色彩的改变，转换时间以及边框和阴影的变化。这些效果可以通过 CSS 的伪类做到。我们将重点讨论以下两种 – :hover和 :active。 :hover伪类定义了当鼠标覆盖你的目标时 CSS 应该采取何种行动。 :active通常在用户点下鼠标和松开鼠标之间的时间内执行动作。

通过伪类你能够完全改变按钮的外观，但这并不是一个对用户友好的方式。对于初学者来说一个好的方法是，在尽可能保持按钮原貌的情况下给它添加一些微小的简单的改变。其中的三个基本点是 颜色， 阴影和 转换时间。

基本点1 – 颜色

这是一个最常见的改变。我们可以通过属性改变颜色，其中最简单的是 color， background-color和 border属性。在我们开始例子之前，让我们先来关注如何选择按钮颜色：

1. 颜色构造– 使用不同的颜色相互排列。 Colorhexa是一个很好的颜色管理工具,用于找出适合搭配的颜色。如果你仍然犹豫不决，可以到 Flat UI color picker获取灵感。

2. 匹配你的颜料– 无论你在使用什么调色板，这都是一个很好的主意。如果你没使用调色板，可以看看 lolcolors。

基本点2 – 阴影

box-shadow使目标周围增加阴影。可以为每个边添加不同的阴影，这种设计 Flat UI 和 Material Design 中都有运用。如果想要更深入的了解 box-shadow，可以访问 MDN box-shadow docs。

基本点3 – 转换时间

transition-duration允许你为 CSS 的改变效果添加一个时间表。没有过渡时间的 CSS 伪类 :hover会立即生效，这可能会使用户产生不悦感。在本教程中会使用过渡时间使你的按钮动画变得自然。

下面的例子会用超过 0.5s 的时间来逐渐实现伪类 :hover的动画效果。

.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;} 

看起来是这样的：

See the Pen Button with transitionsby SitePoint ( @SitePoint) on CodePen.

实现过渡效果的这段代码有点复杂， 所以老版本的浏览器实现的效果可能会有点差异。因此，我们需要为不同的浏览器添加不同的前缀。

transition-duration: 0.5s /* this is standard and works on most modern browsers */-webkit-transition-duration: 0.5s; /* helps some versions of safari, chrome, and android */-moz-transition-duration: 0.5s; /* helps firefox */ 

有许多复杂和有趣的方式能够利用transition来实现你的CSS，这个例子仅仅是最基础的。

按钮的三种风格

1 — Simple Black and White

See the Pen Suit and Tie Button Examplesby SitePoint ( @SitePoint) on CodePen.

这通常是我的项目中首先加入的按钮，因为它能个各种风格搭配。这种风格完美的利用了黑白反差效果。

这两种变化是相似的，所以我们通过代码来展示白底黑字的按钮。要获取另外一种效果只需在代码中把 white和 black对调。

.suit_and_tie {  color: white;  font-size: 20px;  font-family: helvetica;  text-decoration: none;  border: 2px solidwhite;  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;} 

在上面的例子中，通过设置 transition-duration，你会看到 font和 background-color的改变都发在在 0.2s 内。这是一个很简单的例子。从这个例子开始，你可以选择那些给你带来灵感的品牌的色彩。你可以通过 BrandColors获取你喜欢的品牌色彩。

2 — Flat UI buttons

Flat UI 注重于极简主义，通过小的变化阐述一个丰富的故事。当我的项目开始成型后我会把黑白按钮向 Flat UI 按钮迁移。Flat UI 按钮朴素到足够适配大部分设计。

接下来让我们改善我们的按钮，通过给按钮添加位移来模拟 3D 按钮。

<p data-height="265" data-theme-id="0" data-slug-hash="qZzYrg" data-default-tab="css,result" data-user="SitePoint" data-embed-version="2" class="codepen">SeethePen <a href="http://codepen.io/SitePoint/pen/qZzYrg/">FlatUIButtons</a> bySitePoint (<a href="http://codepen.io/SitePoint">@SitePoint</a>) on <a href="http://codepen.io">CodePen</a>.</p><scriptasyncsrc="//assets.codepen.io/assets/embed/ei.js"></script> 

这个例子包括五个按钮，他们之前的差异只是颜色不同，所以让我们关注第一个按钮即可。

.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-bottom, border-left, 和 border-right设置 3D 深度效果取代以往统一设置的边框属性。

对于Flat UI按钮来说， :active能起到很重要的作用。在我们的例子中，使用 :active起到了两个变化。

1. border-bottom从 3px变为 1px。这会导致按钮下面的阴影收缩并且降低整个按钮的像素。虽然代码简单，但这个改变会使得用户认为他们点击了页面中的按钮。

2. 颜色的变化。将背景颜色变暗，模拟按钮远离用户并朝着页面前进的运动轨迹。再次重申，细微的改变会暗示用户他们点击了这个按钮。

对于 Flat UI 按钮来说，简单和微小的变化能传达出重要的含义，许多人用 border-bottom创造移动轨迹。值得注意的是，一些扁平化按钮不需要移动效果只需要改变颜色即可。

3 — Material Design

Material Design 是一种利用卡片传达信息和移动的设计观念。谷歌设计了 Material Design，并把其中的三个主要准则列在了 Material Design Homepage中。

• Material is a metaphor
• Bold, graphic, intentional
• Motion provides meaning

为了更好的理解这三个准则，让我们用 Material Design 进行实际练习。

See the Pen Material Design Buttons With Polymerby SitePoint ( @SitePoint) on CodePen.

这些按钮主要设计两个方面 – box-shadow和 Polymer。

Polymer是一种用于构建网站的组件化框架工具。如果你熟悉Bootstrap，那么Polymer对你来说也是很熟悉的。实现下面这个强大的效果只需要一行代码。

<divclass="button">  <divclass="center" fit>SUBMIT</div>  <paper-ripplefit></paper-ripple> /*this is the line that adds a ripple effect with polymer */</div> 

是非常受欢迎的框架和组件，通过引入我们 HTML 头部的 Polymer 可以访问这个流行的框架和组件，请从 Polymer project homepage了解更多知识。

现在我们了解了 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 is a metaphor– 通过使用 box-shadow我们能够模拟出现实世界中的 3D 阴影效果。

• Bold, graphic, intentional– 这使得那些明亮的蓝色和绿色按钮以及那些完全填充的设计变得更加真实

• Motion provides meaning– 通过结合 polymer 和 box-shadow的过渡效果，当用户点击按钮的时候我们可以创造出更多的效果。

本文介绍了用三种设计方法来构建按钮。如果你希望构建你自己的按钮风格，我建议你使用 CSS3 按钮生成器。

小结

黑白按钮虽然简单但是万无一失。把白色和黑色替换为你的品牌颜色可以迅速创建一个和你网站相关的新按钮。Flat UI 按钮也很简单，利用简单的移动和颜色产生丰富的效果。Material Design 按钮利用放大缩小创造出复杂的运动模拟现实世界中的阴影从而抓住用户的注意力。

希望这个指南能够帮助那些刚学习 CSS 的开发人员了解如何构件强大且有创造性的按钮。