simplify the life

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/

posted on 2018-06-25 13:44 韩子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News