可复用的按钮CSS

一个网站，一些基础颜色都是贯穿始终的。主色，链接色，警示颜色，以及各种按钮和状态颜色等等

废话不多说上图：

currentColor（没见过吧？孤陋寡闻了）：

currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”。currentColor可以继承当前标签的文字颜色。

例如：

.red {
  color: #ed424b;
}
.border-red {
  border: 1px solid currentColor;
}

那么来个例子，通过颜色控制按钮

css：

.red {
  color: #ed424b;
}
.blue {
  color: #4284ed;
}
.green {
  color: #7ed321;
}
.btn {
  background-color: currentColor;
}

html:

<div class="btn red">红色按钮</div>
<div class="btn blue">蓝色按钮</div>
<div class="btn green">绿色按钮</div>

握草！背景色和文字颜色混在一起，看个毛啊！骗人。。。
不要慌！ 解决的办法来了。 利用::first-line伪元素来给文字重新设置颜色。

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

大功告成！最后在附上首图的代码。

css：

/* 基本按钮 */
.btn-normal {
    font-size: 14px;
    line-height: 30px;
    display: inline-block;
    padding: 0 16px;
    text-align: center;
    border-radius: 2px;
    background-color: currentColor;
}
.btn-normal::first-line {
    color: #fff;
}
/* 变色按钮特殊处理 */
.btn-normal.white {
    box-shadow: inset 1px 0 #e3e4e6, inset 0 1px #e3e4e6, inset 0 -1px #e3e4e6, inset -1px 0 #e3e4e6;
}
.btn-normal.white::first-line {
    color: #33373d;
}
/* 交互与变色-加深效果 */
.btn-normal:active,
.btn-normal:hover {
    background-image: -webkit-linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
    background-image: linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
}

/* 实色小标签 */
.tag-solid {
    font-size: 12px;
    line-height: 1.5;
    display: inline-block;
    padding: 0 .25em;
    border-radius: 2px;
    background-color: currentColor;
}
.tag-solid::first-line {
    color: #fff;
}

/* 圆角小标签 */
.tag-honor {
    font-size: 12px;
    line-height: 16px;
    padding: 0 .5em;
    display: inline-block;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 40px;
    background-color: currentColor;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
}
.tag-honor::first-line {
    color: #fff;
}

/* 线框小标签 */
.tag-line {
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    padding: 0 1em;
    border: 1px solid;
    border-radius: 2em;
    background-color: #fff;
}

/* 基础颜色*/
.dark {
    color: #33373d;
}
.gray {
    color: #969ba3;
}
.blue {
    color: #4284ed;
}
.green {
    color: #7ed321;
}
.yellow {
    color: #f0c53a;
}
.purple {
    color: #a091ff;
}
.red {
    color: #ed424b;
}
.white {
    color: #fff;
}

html:

<h4>1. 基础颜色</h4>
<div>
    <span class="dark">主色</span>
    <span class="gray">灰色</span>
    <span class="blue">蓝色</span>
    <span class="green">绿色</span>
    <span class="yellow">黄色</span>
    <span class="purple">紫色</span>
    <span class="red">红色</span>
</div>
<h4>2. 基本按钮</h4>
<div>
    <a href="javascript:" class="btn-normal dark">深色按钮</a>
    <a href="javascript:" class="btn-normal gray">灰色按钮</a>
    <a href="javascript:" class="btn-normal blue">蓝色按钮</a>
    <a href="javascript:" class="btn-normal green">绿色按钮</a>
    <a href="javascript:" class="btn-normal yellow">黄色按钮</a>
    <a href="javascript:" class="btn-normal purple">紫色按钮</a>
    <a href="javascript:" class="btn-normal red">红色按钮</a>
    <a href="javascript:" class="btn-normal white">白色按钮</a>
</div>
<h4>3. 实色小标签</h4>
<div>
    <span class="tag-solid dark">主色</span>
    <span class="tag-solid gray">灰色</span>
    <span class="tag-solid blue">蓝色</span>
    <span class="tag-solid green">绿色</span>
    <span class="tag-solid yellow">黄色</span>
    <span class="tag-solid purple">紫色</span>
    <span class="tag-solid red">红色</span>
</div>
<h4>4. 圆角小标签</h4>
<div>
    <span class="tag-honor dark">主色</span>
    <span class="tag-honor gray">灰色</span>
    <span class="tag-honor blue">蓝色</span>
    <span class="tag-honor green">绿色</span>
    <span class="tag-honor yellow">黄色</span>
    <span class="tag-honor purple">紫色</span>
    <span class="tag-honor red">红色</span>
</div>
<h4>3. 线框小标签</h4>
<div>
    <span class="tag-line dark">主色</span>
    <span class="tag-line gray">灰色</span>
    <span class="tag-line blue">蓝色</span>
    <span class="tag-line green">绿色</span>
    <span class="tag-line yellow">黄色</span>
    <span class="tag-line purple">紫色</span>
    <span class="tag-line red">红色</span>
</div>