【译文】CSS技术：如何正确的塑造button样式！

英文原文地址 https://fvsch.com/code/styling-buttons/

Styling buttons, the right way！

在本教程中咱们将学习完成<a>和<button>的基本样式并进行css自定义

---

 

一 <button>样式重造

潜规则里，咱们99%的点击事件都是<a>或<button>来承担的。若是你不清楚如何正确使用标签的话能够按下面的规矩来：

①若是即将跳转到其它页面或大幅修改当前页面的内容（ajax）就使用(<a href="some_url">…</a>).

②不然就使用(<button type="button">…</button>).

正确的使用标签有不少好处如①SEO-friendly ②方便键盘快捷键 ③用户体验更好

尽管如此，<button>标签仍是被<div> <span> <a>等标签在不少状况下替代。

为何<button>如此不被重用？

①了解程度: 许多开发者对此标签不了解(学习一下 HTML’s 100+ elements).

②样式复杂: <button> 自带复杂的默认样式,从而想得到较好的自定义样式比较困难

谢天谢地，咱们能够 经过下面的代码对<button>进行重塑

/**
 * Reset button styles.
 * It takes a bit of work to achieve a neutral look.
 */
button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  /* show a hand cursor on hover; some argue that we
  should keep the default arrow cursor for buttons */
  cursor: pointer;
}

完成后<button>标签显示如普通文本

 button

这种方法的缺点是，如今咱们必须在全部的按钮上设置CSS样式，不然用户将没法识别它们（参见：affordance）。

@mixin button-reset {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

.my-custom-button {
  @include button-reset;
  padding: 10px;
  background-color: skyblue;
}

<button type="button">
  I use default browser styles
</button>

<button type="button" class="my-custom-button">
  And I’m using custom styles instead
</button>

 

---

 

二 自定义<button>css样式

咱们上面已经移除了默认样式，如今咱们来定义本身的button样式

①“button”样式能够被用于link或是button

②让样式变的可供选择，毕竟页面会存在各类各样的样式

使用class选择符 .btn (相似bootstrap中的使用)

.btn {
  /* 默认为button 可是在<a>上依然有效 */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* 创造上下间距必定的空间 */
  margin: 2px 0;

  /* border透明 (当鼠标悬停时上色) */
  border: solid 1px transparent;
  border-radius: 4px;

  /* padding大小与字体大小相关 (no width/height) */
  padding: 0.5em 1em;

  /* 确保字体颜色和背景色有足够区分度! */
  color: #ffffff;
  background-color: #9555af;
}

高对比度！ strong contrast (5.00):

避免以下！ low, inaccessible contrast (2.30):

 

之所要避免第二种的低对比度图像

一方面，有的人可能视力有所欠缺；另外一方面，即便是视力良好的朋友在阳光下看手机等状况也没法正常阅读。

能够经过这个网站完成对比度的测试 check your contrast ratios here

---

 

三 对button的hover，focus，active状态进行区分

因为button是一个须要交互的标签，用户在对button进行操做时确定要获得反馈

浏览器自己对focus和active有默认的样式，可是咱们的重置取消了这部分样式；所以咱们须要添加一部分css代码完成这部分的操做，并让button变化的状态和咱们此前的样式更搭！

①:active状态

/* old-school "的button位置下移+ 颜色饱和度增长 */
.btn:active {
  transform: translateY(1px);
  filter: saturate(150%);
}

②咱们能够改变按钮的颜色，可是我想为悬停时保留这种样式：

/* 鼠标悬停时颜色反转 */
.btn:hover {
  color: #9555af;
  border-color: currentColor;
  background-color: white;
}

③让咱们增长focus样式，用户常常会用键盘或是虚拟键盘(ios或安卓等)来focus表单，button，links和其余一些交互性组件

一方面：这样能够加快交互效率

另外一方面：对有的人而言，没法使用鼠标，那么就可能依赖键盘或是其余工具访问网站

在绝大多数我见过的项目中，设计师仅仅指定mouse-over样式而没有focus样式，咱们应该怎么作呢？

答案：最简单的方法就是复用hover样式给focus

/* 复用样式 */
.btn:hover,
.btn:focus {
  color: #9555af;
  border-color: currentColor;
  background-color: white;
}

④若是要用到focus样式，那么就须要移除浏览器button默认的样式（不然当button是focus或active状态下都会有outline边框）

.btn {
  /* ... */
  /* all browsers: 移除默认focus样式 */
  outline: none;
}

/* Firefox: 移除默认focus样式 */
.btn::-moz-focus-inner {
  border: none;
}

试一试效果,若是有键盘能够尝试用tab和shift+tab进行导航从而触发focus！　　

Hi, I’m a link And I’m a button

---

 

四 :active和:focus同时触发的问题！！

当咱们对button进行点击时，active和focus伪类同时触发，在鼠标移开后，active伪类消失，可是focus样式还在，这种时候咱们就须要点击其余地方才能够消除样式，很难受！

咱们发现，有一种新的伪类:focus-visible pseudo-class (draft specification). 

这个特性尚未彻底肯定，可是这个想法很好，是指浏览器应该只在键盘或键盘式交互以后出现:focus-visible，而鼠标点击无效。

可是因为多数浏览器尚未这个新特性，全部须要借助this polyfill.

该JS保证了后相兼容性

在引入该polyfill后

/*
  保留键盘触发的focus，取消鼠标触发的focus
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step then the browser's default focus
  indicator will be displayed instead.
这段我不太清楚怎么翻译，，
*/
.js-focus-visible .focus-visible {
  …
}

在本项目中首先对hover和focus解耦

/* inverse colors on hover */
.btn:hover {
  color: #9050AA;
  border-color: currentColor;
  background-color: white;
}

/* make sure we have a visible focus ring */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
    0 0 0 1.5px rgba(255, 105, 180, 0.5);
}

而后利用polyfill完成移除多余的鼠标focus效果

/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
  box-shadow: none;
}

完成地址： look at the final code

只有键盘交互才会出现的focus样式！