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

原文地址

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

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

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

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

CSS 按钮的基本点

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

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

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

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

基本点1 – 颜色

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

颜色构造– 使用不同的颜色相互排列。 Colorhexa是一个很好的颜色管理工具,用于找出适合搭配的颜色。如果你仍然犹豫不决，可以到 Flat UI color picker获取灵感。
匹配你的颜料– 无论你在使用什么调色板，这都是一个很好的主意。如果你没使用调色板，可以看看 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;}

Salin selepas log masuk

看起来是这样的：

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 */

Salin selepas log masuk

有许多复杂和有趣的方式能够利用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;}

Salin selepas log masuk

在上面的例子中，通过设置 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>

Salin selepas log masuk

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

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

Salin selepas log masuk

这个按钮有三种状态，普通的（没有状态）， :hover和 :active。

值得注意的是， :hover状态只有一行代码，用于降低透明度。这是一个有用的技巧，当你需要一个更透明的颜色时不需要额外去寻找即可。

CSS 中的变量并不是新的，但使用了一些小的技巧。通过给 border-bottom, border-left, 和 border-right设置 3D 深度效果取代以往统一设置的边框属性。

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

border-bottom从 3px变为 1px。这会导致按钮下面的阴影收缩并且降低整个按钮的像素。虽然代码简单，但这个改变会使得用户认为他们点击了页面中的按钮。
颜色的变化。将背景颜色变暗，模拟按钮远离用户并朝着页面前进的运动轨迹。再次重申，细微的改变会暗示用户他们点击了这个按钮。

对于 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>

Salin selepas log masuk

是非常受欢迎的框架和组件，通过引入我们 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;}

Salin selepas log masuk

这些按钮在设计中大量使用 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);}

Salin selepas log masuk

box-shadow通常用于在按钮的左边框和底部边框放置一层阴影。当用户点击的时候，这个阴影会进一步延伸，变得更加透明。这个运动模拟了按钮的 3D 阴影从页面向用户移动。这些运动体现了 Material Design 风格和行动准则的一部分。

通过结合 polymer 和 box-shadow的效果，可以构造出 Material Design 风格的按钮。