pure.css 源码之 buttons 篇

心血来潮，打算抓个 css 框架看看，雅虎出品的轻量级框架 pure.css 非常符合我的要求。

首先看它的 Buttons 部分，真的是麻雀虽小五脏俱全，该有的都有了。源码分别在 buttons-core.css 以及 buttons.css，其中前者主要涉及到一些属性的重置（防止不同浏览器表现不一致），后者是主要的样式设置，包括 hover、disabled 时的样式，等等。

使用方式：

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

直观地体验了下 pure 的 button 和原生的 button，最大的区别在于，pure 的 button click 的时候改变的是边框阴影，而原生的 button 改变的似乎是 background，那么如何将原生改造成那样呢？

看了下源码，给原生的 button 加上 border 和 background 属性，再次点击的时候似乎就没有效果了，经过我的测试，在 chrome 下加上任意其一即可（也是很奇怪，设置 border 后为什么点击会失去效果呢？）

然后再操作一下 :focus 以及 :active 伪类的样式，加点 padding 和圆角，最终代码：

button {
  border: none rgba(0, 0, 0, 0);
  background-color: #E6E6E6;
  padding: 0.5em 1em;
  border-radius: 2px;
}

button:active {
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 0 6px rgba(0,0,0,.2) inset;
}

button:focus {
  outline: none;
  background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}

关于为什么要同时操作 :focus 以及 :active，可以参考 这个回答。简单地说，上面这个按钮，如果使用 tab 将它选中，那么这个时候是 :focus 状态，然后再点击，就会触发 :active，所以直接点击的话，是会先触发 :focus 然后再 :active 的，也就是其实是 :focus:active 两个状态。

其他的一些对于 IE 兼容性做的处理，可以参考源码。

disabled 的处理有两种方式，一种是加个类 pure-button-disabled，另外一个是加上 disabled 属性，直接 copy 源码：

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
    border: none;
    background-image: none;
    /* csslint ignore:start */
    filter: alpha(opacity=40);
    /* csslint ignore:end */
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

又看到了 pointer-events: none ，这个属性非常好用，之前的文章 我介绍过它在实际开发中的两个应用。buttons 类可以用于 button 和 a 标签两种，button 标签本身就可以添加 disabled 属性并生效（使得 button 失效），但是如何要让 a 标签不可点击呢？只能求助于 pointer-events: none 了。

其他方面，active 非常简单不赘述，Primary Buttons 自己可以定制，就是改变下 background 和 color 的颜色而已。

另外，按钮 size 可以选择，有相应的类，具体实现就是改变 font-size 的大小，因为单位是 rem，所以相应的 size 的 padding 会自动扩大和缩小。

如果有兴趣自己实现一个 button，可以到这里 https://www.bestcssbuttongenerator.com/