如何更好的控制按钮样式

这样一来，不管是 元素或者是 元素，甚至是其他的HTML标签，比如 div 标签，最终的效果都统一了，可能类似于下图这样的效果：

对于按钮颜色的控制，更应该根据自己的设计需求（用户的需要）做相应的设备。

正如上图所示，现在看上去像一个按钮了，但仅仅是一种状态。而事实上呢？Web页面或Web应用程序上的按钮除了默认状态样式之外，还有 :hover 、 :focus 和 :active 等状态。这样一来按钮的交互行为更全，按钮看上去也更漂亮。

其实客户端，比如浏览器已经为 的 focus 和 active 状态提供了默认样式，只不过我们在重置按钮样式的时候把这些样式也重置了。如果为了和设计相匹配，我们需要为这些状态添加样式：

.btn:focus,
.btn:active {
    outline: none 0;
    transform: translateY(1px);
    filter: saturate(150%);
}
.btn:hover {
    color: #9555af;
    border-color: currentColor;
    background-color: #fff;
}

这个时候按钮的样式更为丰富，效果看起来像下图这样：

前背景自动配色

前背景自动配色指的是按钮的 color 值会根据 background-color 做出相应的调整。比如说， 根据 background-color 将 color 换成 black 或 white 。另外对于 border-color 也可以应用同样的逻辑。这样做的话，让我们的按钮更具可视性，也更易于维护和打理。

实现这样的一个效果，最简单的方法就是使用CSS的 HSL 来设置颜色的值，并且同时借助CSS自定义的特性，让事情变得更简单些。具体实现的时候，我们可以这样做：

这样就可以非常简单的确定亮度并将其作为条件语句的基础：

:root {
    --hue: 220;
    --saturation: 90;
    --light: 36;
}
.btn {
    background-color: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--light) * 1%));
}

这个时候看起来像下图这样：

CSS自定义属性提供的API： style.setProperty() ，借助 我们可以很好的做一些动态计算，这样可以很好的看到修改三个自定义属性时，对按钮背景颜色的变化：

上面Demo所看到的仅仅是对按钮背景颜色的调整，但还没有达到我们所需要的要求，按钮的 color 会根据 background-color 做相应的调整。不过不用担心，为了达到想要的目标，我们继续往下阅读。

前面提到过，自从引入CSS自定义属性以来，我们就得到了附带的条件语句。这个技巧是基于一些 CSS参数被限制为最小值和最大值 。简单地说：

CSS属性值超过正常的范围的时候，只要格式正确，就会正常的渲染，而这个渲染的值只是其合法的边界值，即： CSS的最小值和最大值 。

比如CSS中的 opacity 这个属性，我们都知道这个属性值的合法范围是 0 ~ 1 之间，而在实际使用的时候，就算是你设置了小于 0 或者大于 1 的值时，浏览器也能正常的渲染，只不过其被渲染的值要么是 0 ，要么是 1 。比如：

.demo {
    opacity: -1; /* 被渲染成 0*/
    opacity: 2; /* 被渲染成 1*/
}

除了这个属性值之外，CSS中还有一些属性值也有类似的特性，比如颜色中的 RGB ，它们的范围就是 0~255 ； HSL 中的 H 是 0 ~ 360 ， S 和 L 是 1 ~ 100 。这样一来，我们就可以把这样的特性应用到我们的按钮设置中（完成背景颜色和文本颜色切换）。还是拿 HSL 设置颜色为例，将任何负值限制为 0 （不管色相和饱和度如何，结果是黑色）；将任何大于 100% 的值限制为 100% （总是白色）。

如此一来，我们可以从亮度（ --light ）参数中减去所需的阈值（也就是临界值，这个值一般设置在 50 ~ 70 之间），这个阈值用 --threshold 来表示，然后再乘以 100% ，这样做就可以让其超过其中一个限制，要么小于 0 ，要么大于 100% 。因为我们需要负的结果用白色表示，正的结果用黑色表示，所以还要把其结果反过来，因此我们可以乘以一个 -100% 。将代码稍微调整一下：

:root {
    --light: 80;
    --threshold: 60;
}
.btn {
    --switch: calc( (var(--light) - var(--threshold)) * -100% );
    color: hsl(0, 0%, var(--switch));
}

这个时候调整 --light 的值时，按钮的 color 会随着 background-color 在 black 和 white 之间进行切换。如下图所示：

上图效果中我们不难发现，当按钮的背景颜色太亮时（趋于白色），在主体背景颜色和按钮背景颜色相近时，我们的按钮看上去又像是一个文本了，似乎回到了按钮重置样式之初了：

为了提供一个更好的用户体验，我们可以使用上述同样的原理来给按钮设置 border-color 。那么我们就需要一个边框颜色的阈值，即： --border-threshold ，一般情况设置为 80 ：

:root {
    --border-threshold: 80;
}
.btn {
    --border-light: calc(var(--light) * 0.7%);
    --border-alpha: calc((var(--light) - var(--border-threshold)) * 10);
    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), var(--border-light), var(--border-alpha));
}

这个时候，整个按钮的效果更接近于我们的目标了，如下图所示：

当然，你也可以直接在下面的这个Demo体验一下：

整体的关键代码如下：

:root {
    --hue: 220;
    --saturation: 90;
    --light: 36;
    --threshold: 60;
    --border-threshold: 80;
}
.btn {
    --switch: calc( (var(--light) - var(--threshold)) * -100% );
    --border-light: calc(var(--light) * 0.7%);
    --border-alpha: calc((var(--light) - var(--border-threshold)) * 10);
    color: hsl(0, 0%, var(--switch));
    background-color: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--light) * 1%));
    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), var(--border-light), var(--border-alpha));
}

上面我们是使用 hsl 来设置按钮的相关颜色。其实使用 RGB 设置按钮元素有关于颜色部分的属性值也是可以的，这里会用到一些颜色计算的公式，即： 使用 RGB 中的 R 、 G 和 B 分别乘以相关系数模拟出一个 L 。这里分别会用到 sRGB Luma 和 算法（公式）：

根据类似的做法，我们可以这样来撸码：

:root {
    --red: 128; 
    --green: 40;
    --blue: 220;
    /* 阈值范围`0 ~ 1`，建议取值`0.5 ~ 0.6`之间*/
    --threshold: .6;
    /*阈值范围： `0 ~ 1`，建议取值`0.8+`*/
    --border-threshold: 0.8;
}
.btn {
    /*使用sRGB Luma公式计算L*/
    --r: calc(var(--red) * 0.2126);
    --g: calc(var(--green) * 0.7152);
    --b: calc(var(--blue) * 0.722);
    --lightness: calc((var(--r) + var(--g) + var(--b)) / 255);
    --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
    background-color: rgb(var(--red), var(--green), var(--blue));
    color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -10000000%));
    border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
}

有关于这方面更详细的介绍可以阅读 @张鑫旭 老师的博文《 CSS前景背景自动配色技术简介 》。

设置二级按钮样式

在很多CSS Frameworks中有关于按钮的组件都会有二级按钮的样式风格。比如大家熟知的Bootstrap，它的二级按钮样式风格长得如下图所示：

在按钮系统中二级按钮与主按钮唯一不同的就是背景颜色上的差异。大多时候，通过另外一个类名，比如 btn-secondary ，给其设置一个 background-color 。

前面我们提到过，通过 HSL 或 RGB 颜色值，并且借助 sRGB Luma 和 算法控制按钮背景色和文本色。如果我们想基于这个系统上来完成二级按钮样式颜色控制话。我们应该如何做呢？

实现这一目标我们可以通过以下两种方式来实现：

这样一来，只需在 .btn-secondary 上重置 --h 的值：

.btn-secondary {
    --h: calc(var(--hue) + 60)
}

其实除了上述的方式之外，还可以使用 color-mod() 函数来修改颜色。只是目前该属性可用性还不足够好。如果你感兴趣的话，不仿阅读《 使用 color-mod() 函数修改颜色 》一文。

总结

按钮在Web应用程序中是最为常见的一种组件，避免不了对按钮写样式。而这篇文章介绍如何给按钮写样式，又应该如何正确的给按钮写样式。并且在后文中根据 sRGB Luma 和 算法，借助 HSL 、 RGB 以及CSS自定义属性，实现按钮 background-color 和 color 自动切换等效果。