按钮作为网页设计中的一名常客，游走于pc和移动端，基于状态和基于颜色会有什么不同呢？

本文参考来源于-http://www.zhangxinxu.com/wordpress/2016/11/development-ui-component-based-on-css-color/

基于状态的按钮

参考微信中的设计-https://weui.io/#button

html:

<a href="#" class="weui_btn weui_btn_primary">按钮</a>
<a href="#" class="weui_btn weui_btn_warn">确认</a>
<a href="#" class="weui_btn weui_btn_default">按钮</a>

css:

.weui-btn {
    position: relative;
    display: block;
    margin-left: auto; margin-right: auto;
    padding-left: 14px; padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    line-height: 2.55555556;
    border-radius: 5px;
    overflow: hidden;
}
.weui-btn_primary { background-color: #1aad19; }
.weui-btn_default {
    color: #000000;
    background-color: #F8F8F8;
}
.weui-btn_warn { background-color: #E64340; }

实例：

基于状态的区分ui组件，在语义上是非常明确的，但是对应css代码，则显得异常冗长

基于颜色的按钮

1.设定颜色color

.dark { color: #33373d; }
.gray { color: #969ba3; }
.blue { color: #4284ed; }
.green { color: #7ed321; }
.orange { color: #f0643a; }
.yellow { color: #f0c53a; }
.purple { color: #a091ff; }
.red { color: #ed424b; }
.white { color: #fff; }

2.基于color设置按钮样式

记住border边框默认是color的颜色，currentColor变量也指当前字体颜色color
css如下：

.ning-btn {
    font-size: 14px;
    display: inline-block;
    padding: .179rem 1em;
    text-align: center;
    border: 1px solid;
    border-radius: 2px;
    background-color: currentColor;
}

然后你会发现按钮的字体颜色不是和背景颜色一样了吗，岂不是成为了一个纯色按钮块
这时，请出我们的::first-line,因为常规的按钮上只有一行文字

.ning-btn::first-line { color: #fff; }

3.根据font-size控制按钮尺寸

._xs { font-size: 12px; }
._sm { font-size: 14px; }
._md { font-size: 16px; }
._lg { font-size: 18px; }

4.兼容性保证

currentColor不兼容低版本浏览器的话，直接同时设定.dark { background-color: #33373d; color: #33373d; }

对于容易产生冲突的的附属类名，添加一个前缀，比如._dark { background-color: #33373d; color: #33373d; }，约定带通用前缀的代码是不能单独使用的。
最终实现如下：

<a href="#" class="ning-btn _xs _white">小的白色按钮</a>
<a href="#" class="ning-btn _sm _blue">正常蓝色按钮</a>
<a href="#" class="ning-btn _md _yellow">中等黄色按钮</a>
<a href="#" class="ning-btn _lg _purple">大的紫色按钮</a>

结语

本策略能够实现的重点技巧就是利用::first-line伪元素的文字控色技术
所以也仅限用于只有一行文字的按钮

感谢阅读 thx~
本文链接：https://627235655.github.io/2018/06/14/color-btns/