css按钮按下改按钮颜色_现代CSS按钮基础知识简介

css按钮按下改按钮颜色

Update (9th July 2016): This article has been updated to include <button> tags rather than anchor tags to meet modern accessibility best practices. If you are working with buttons, always stick to the <button> tag.

更新(2016年7月9日)：本文已更新为包含<button>标签而不是锚标签，以满足现代无障碍最佳实践。 如果使用按钮，请始终坚持<button>标记。

Buttons are one of the most important components of any web page, and they have many different states and functions that all need to correctly match previous design decisions. In this article, we are going to cover three button design mindsets, alongside CSS code and tools to help new developers create their own buttons.

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

Before we dive into the various button mindsets, we need to reinforce a few of the basics of CSS buttons. Knowing the ideological difference between Flat UI and Material Design doesn’t matter if you do not know which CSS components change.

在深入探讨各种按钮思维方式之前，我们需要增强一些CSS按钮的基础知识。 如果您不知道哪个CSS组件会发生变化，则了解Flat UI和Material Design之间的意识形态差异并不重要。

Let’s quickly have a refresher on the basics of CSS buttons.

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

CSS按钮的基础 (The Basics of CSS Buttons)

The definition of a good button is subjective to each website, but a few non-technical standards exist:

优质按钮的定义取决于每个网站，但是存在一些非技术标准：

1. Accessibility – This is paramount. Buttons should be easily accessible to people with disabilities and older browsers. The web’s openness is beautiful, don’t ruin it with lazy CSS.

   可访问性 –这是至关重要的。 残疾人和较旧的浏览器应易于访问按钮。 Web的开放性很漂亮，请不要用懒惰CSS破坏它。

2. Simple text – Keep text within your buttons short and simple. Users should be able to immediately understand a button’s purpose and where it will take them.

   简单文本 –使按钮内的文本简短明了。 用户应该能够立即了解按钮的用途以及将按钮带到何处。

Almost all buttons you see online will use some variation of color changes, translation times, and border and shadow changes. These can be leveraged using various CSS pseudo-classes. We will focus on two of these — :hover and :active. The :hover pseudo-class defines how CSS should change when your mouse hovers over an object. :active most commonly executes between the time a user presses the mouse button and releases it.

您在网上看到的几乎所有按钮都会使用颜色变化，翻译时间以及边框和阴影变化的一些变化。 可以使用各种CSS伪类来利用这些属性。 我们将专注于这两个- :hover和:active 。 :hover伪类定义当鼠标悬停在对象上时CSS应该如何更改。 :active通常在用户按下鼠标按钮并释放它的时间之间执行。

It is possible to change the entire display of a button with pseudo-classes, but that’s not a user-friendly approach. A good strategy for beginners is to add small or simple changes to button fundamentals while keeping the button familiar. The three main fundamentals of buttons are color, shadow and translation time.

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

基础1-颜色 (Fundamental 1 — Color)

This is the most common change. We can change the color of a variety of properties, the simplest of which are the color, background-color and border properties. Before we jump into examples, let’s first focus on how to choose button colors:

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

1. Color combinations – Use colors that compliment each other. Colorhexa is a great tool for finding which colors work together. If you’re still looking for colors, check out Flat UI color picker.

   色彩组合 –使用相互补充的色彩。 Colorhexa是查找哪些颜色可以协同工作的好工具。 如果您仍在寻找颜色，请查看Flat UI颜色选择器 。

2. Match your palette – It is generally a good idea to match whichever color palette you are already using. If you are still looking for a color palette, check out lolcolors.

   匹配调色板 –匹配已经使用的任何调色板通常是一个好主意。 如果您仍在寻找调色板，请查看lolcolors 。

基本原理2-阴影 (Fundamental 2 — Shadow)

box-shadow lets you add a shadow around an object. It is possible to add unique shadows to each side, this idea is leveraged by both Flat UI and Material Design. To learn more about box-shadow, check out the MDN box-shadow docs.

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

基本原理3-过渡期限 (Fundamental 3 — Transition Duration)

transition-duration lets you add a timescale to your CSS changes. A button without a transition time will change to its :hover CSS instantly, which might be off-putting to a user. Many buttons in this guide leverage translation times to feel natural.

transition-duration使您可以为CSS更改添加时间刻度。 没有过渡时间的按钮将立即变为其:hover CSS，这可能会给用户带来不适。 本指南中的许多按钮都利用翻译时间让您感到自然。

The following example transitions a button style gently (over 0.5 seconds) on :hover:

下面的示例在: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;
}

This looks like so:

看起来像这样：

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

请参阅CodePen上带有 SitePoint( @SitePoint ) 过渡的笔按钮 。

The code that runs transitions is complicated, so older browsers treat transitions a bit differently. Because of this, we need to include vendor prefixes for older browsers.

运行过渡的代码很复杂，因此较旧的浏览器对过渡的处理有些不同。 因此，我们需要为旧版浏览器添加供应商前缀。

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

删除默认按钮样式 (Removing Default Button Styles)

In order to take default browser styles away from <button> elements so we can give them custom styles, we include the following CSS:

为了使默认的浏览器样式远离<button>元素，以便为它们提供自定义样式，我们包含以下CSS：

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

However, it is best to apply this to classes on your button elements, rather than every button by default.

但是，最好将此方法应用于按钮元素上的类，而不是默认情况下将其应用于每个按钮。

There are many complicated and interesting ways to modify how transition changes your CSS, this refresher has just covered the basics.

有许多复杂而有趣的方法可以用来修改transition如何更改CSS，而本教程仅介绍了基础知识。

三种样式的按钮 (Three Styles of Buttons)

1-简单的黑白 (1 — Simple Black and White)

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

请参阅CodePen上SitePoint ( @SitePoint )的笔套装和领带按钮示例 。

This is usually the first button I add in my side projects because its simplicity works with a huge variety of styles. This style takes advantage of the naturally perfect contrast of black and white.

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

The two variations are similar, so we’ll just be going through the code of the black button with a white background. To get the other button just flip every white and black.

这两个变体是相似的，因此我们将仅介绍带有白色背景的黑色按钮的代码。 要获得另一个按钮，只需翻转所有white和black 。

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

In the styles above, you’ll see that font and background-color change during a transition-duration of .2s both ways. This is a really simple example. To build from here, you could use the colors from your favorite brands as inspiration. A good way to find brand colors like these is with BrandColors.

在上面的风格，你会看到， font和background-color一变在transition-duration的.2s两种方式。 这是一个非常简单的例子。 要从这里开始构建，您可以使用自己喜欢的品牌的颜色作为灵感。 查找这样的品牌颜色的一种好方法是使用BrandColors 。

2-平面UI按钮 (2 — Flat UI buttons)

Flat UI focuses on minimalism and telling a big story with small motions. I usually migrate from black and white to Flat UI buttons once my projects start to take shape. Flat UI buttons are minimal enough to fit into most designs.

Flat UI注重极简主义，并以小动作讲述大故事。 一旦我的项目开始成形，我通常会从黑白迁移到Flat UI按钮。 平面UI按钮最小，足以适合大多数设计。

Let’s improve our button from earlier by adding button movement to simulate a 3D button.

让我们通过添加按钮运动来模拟3D按钮来改进按钮。

See the Pen Flat UI Buttons by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔平面UI按钮 。

This example includes five buttons, but since the only change is color, we are going to focus on the first button.

此示例包括五个按钮，但是由于唯一的变化是颜色，因此我们将重点放在第一个按钮上。

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

There are three states for this button, regular (no state name), :hover, and :active.

此按钮有三种状态，常规(无状态名称) :hover和:active 。

It is notable that :hover contains only a single line of code that lowers opacity. This is a useful trick that makes a button appear lighter without requiring you to find a new, actually lighter, color.

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

The CSS variables aren’t new, but a few are used in new ways. Instead of having border be a solid uniform line, border-bottom, border-left, and border-right are used to create a 3D depth effect.

CSS变量不是新的，但是有一些以新的方式使用。 代替的具有border是固体均匀线， border-bottom ， border-left和border-right用于创建3D深度效果。

Flat UI buttons leverage :active heavily. Two things happen when our example button becomes :active.

扁平化的UI按钮可发挥作用:active 当示例按钮变为:active时，会发生两件事:active

1. The :border-bottom changes from 3px to 1px. This causes the shadow below the button to shrink and bring the whole button object down a couple of pixels. Though simple, this one change helps the user feel like they’re clicking the button into the page.

   :border-bottom从3px变为1px 。 这将导致按钮下方的阴影缩小，并使整个按钮对象下降几个像素。 尽管很简单，但这一更改可以帮助用户感觉就像在单击页面中的按钮一样。

2. The colors change. The background colors darken, simulating physical movement away from the user and into the page. Again, this slight change reminds the user that they are clicking a button.
   颜色会改变。 背景颜色变暗，模拟物理运动远离用户并进入页面。 再次，此轻微更改提醒用户他们正在单击按钮。

Flat UI buttons value simple and minimal movements that tell big stories. Many use :border-bottom to create a shallow movement. It is worth noting that some Flat UI buttons don’t move at all and only leverage color changes.

扁平的UI按钮重视讲述大故事的简单而最少的动作。 许多人使用:border-bottom来进行浅运动。 值得注意的是，某些平面用户界面按钮根本不会移动，只能利用颜色变化。

3 —材料设计 (3 — Material Design)

Material Design is a design mindset that promotes cards of information with attention grabbing motions. Google designed the idea of “Material Design” and has listed three main principles on the Material Design Homepage:

材料设计是一种设计思路，可以通过吸引注意力的动作来宣传信息卡。 Google设计了“材料设计”的概念，并在Material Design主页上列出了三项主要原则：

• Material is a metaphor
  物质是一个隐喻
• Bold, graphic, intentional
  粗体，图形，故意
• Motion provides meaning
  运动提供意义

To get a better idea of these three principles, let’s see Material Design in action.

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

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

请参阅CodePen上SitePoint ( @SitePoint )的带有聚合物的笔材质设计按钮 。

Note from the editor: This example does not contain a <button> tag as it follows Polymer’s default markup for buttons, however if you are implementing Polymer on a big project, it is worth exploring using buttons rather than anchor tags in your implementation. We’ll be exploring this in greater detail in a future post.

编辑器的注意事项：该示例不包含<button>标记，因为它遵循Polymer的按钮默认标记，但是，如果要在大型项目上实现Polymer，则值得探索在实现中使用按钮而不是锚标记。 我们将在以后的文章中对此进行更详细的探讨。

These buttons leverage two main ideas — box-shadow and Polymer.

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

Polymer is a framework of components and tools built to help design websites. If you are familiar with Bootstrap, Polymer is very similar. The powerful ripple affect found above is added with a single line of code.

Polymer是旨在帮助设计网站的组件和工具的框架。 如果您熟悉Bootstrap，Polymer就非常相似。 上面发现的强大涟漪效应添加了一行代码。

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

<paper-ripple fit></paper-ripple> is a Polymer component. By importing Polymer at the start of our HTML, we have access to the popular framework and its components. Learn more on the Polymer project homepage.

<paper-ripple fit></paper-ripple>是聚合物组件。 通过在HTML的开头导入Polymer，我们可以访问流行的框架及其组件。 在Polymer项目主页上了解更多信息。

Now that we understand what polymer is and where the ripple comes from (how it works is a story for another day), let’s talk about the CSS that helps fulfill the Material Design principles by making the buttons pop.

既然我们了解了聚合物是什么以及波纹来自何处(如何工作又是另一回事了)，让我们来讨论一下通过弹出按钮来帮助实现材料设计原则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;
}

These buttons use box-shadow for a lot of their design. Let’s look into how box-shadow changes and works its magic by removing any CSS that doesn’t change:

这些按钮在很多设计中都使用了box-shadow 。 让我们通过删除所有不变CSS来研究box-shadow如何变化并发挥其魔力：

.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 is used to put a thin dark shadow on the left and bottom of each button. When clicked, the shadows stretch further and become less dark. This motion simulates the 3D shadow of a button that is jumping off the page towards the user. This motion is part of the Material Design style and its principles in action.

box-shadow用于在每个按钮的左侧和底部放置一个细小的深色阴影。 单击时，阴影会进一步伸展并变暗。 此动作模拟了从页面跳向用户的按钮的3D阴影。 该动议是“材料设计”风格及其实践原则的一部分。

It is possible to make Material Design buttons by combining Polymer with box-shadow effects.

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

• Material is a metaphor – by leveraging box-shadow we are able to simulate 3D shadows as they would appear with real world objects

  材质是一个隐喻 –通过利用box-shadow我们能够模拟3D阴影，就像它们在现实世界对象中出现一样

• Bold, graphic, intentional – this is more true for the bright blue and green buttons, and those fulfill this completely.

  粗体，图形，故意 –明亮的蓝色和绿色按钮更是如此，而那些按钮完全可以做到这一点。

• Motion provides meaning – With Polymer and box-shadow transitions, we can create a lot of motion when the user clicks a button.

  动作提供了意义 –借助Polymer和box-shadow过渡，当用户单击按钮时，我们可以创建很多动作。

This article covers how to make buttons with three varied design methodologies. If you want to prototype your own button designs, I recommend using the CSS3 Button Generator.

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

结论 (In Conclusion)

Black and white buttons are foolproof and simple. Replace black and white with your brand colors for a quick button that is relevant to your site. Flat UI buttons are simple, and leverage small motions and colors to tell big stories. Material Design buttons leverage large-scale complex motions mimicking real world shadows to grab the user’s attention.

黑色和白色按钮十分简单。 将黑色和白色替换为品牌颜色，以获得与您的网站相关的快速按钮。 扁平UI按钮很简单，并利用小的动作和颜色来讲述大故事。 材质设计按钮利用模仿现实世界阴影的大规模复杂动作来吸引用户的注意力。

Hopefully this guide will have helped those new to CSS to understand the building blocks that make buttons so powerful and creatively widespread.

希望本指南将帮助那些刚接触CSS的人理解使按钮如此强大且富有创意地广泛使用的构造块。

翻译自: https://www.sitepoint.com/modern-css-buttons/

css按钮按下改按钮颜色