如何更好的控制按钮样式

在Web页面或应用程序中都可能会有按钮的出现，甚至很多时候链接的样式看起来也像个按钮。那么我们应该怎么来美化按钮的样式呢？在这篇文章中，我们一起来聊聊按钮样式应该怎么才能更好的控制。

重置按钮的样式

平时在Web中添加一个按钮，大多数的时候都会使用 <a> 、 <button> 标签，也有的时候会使用 <input type="button"> 。随着移动端的出现，更多的人喜欢使用 <div> 标签来添加按钮，而事实上，HTML中的任何一个标签元素都可以是用来写一个按钮。虽然写一个按钮的标签元素没有过严格的要求，不过个人更建议写按钮的时候采用 <a> 标签或者 <button> 标签，出于这样的考虑主要还是因为标签的语义化来做的考虑。

至于在Web中应该使用 <a> 还是 <button> 标签或者说其他的HTML标签来写一个按钮呢？在社区也有过相应的讨论，只不过在这篇文章中不想做过多的阐述，如果你感兴趣的话，可以花点时间阅读下面几篇文章：

• Links vs. Buttons in Modern Web Applications
• Anchors vs Buttons
• The Difference Between Anchors, Inputs and Buttons
• But sometimes links look like buttons (and buttons look like links)

事实上，在Web网站或应用程序中近 99.9% 的可点击内容都是 <a> 或 <button> 元素。如果你不确定在给定的情况下应该使用什么元素的话，可以参考下面的建议：

• 如果需要跳转到新的页面或更改页面的大部分内容，建议使用 <a> 元素
• 否则，更建议使用 button 元素（或者 <input type="button"> ）

为什么要这么用呢？主要是出于HTML的语义化做考量，而且这样做更有利于SEO。除此之外也能更好的配合键盘做相应的操作，更利于提高用户的可访问性。尽管如此，开发人员很少使用 <button> 元素。特别是在移动端的开发中，更多的开发人员更喜欢使用 <div> 、 <span> 或 <a> 这样的元素。

为什么会有这方面的现象呢？主要是因为： <button> 元素带有复杂的默认样式（特别是在不同的浏览器中略有不同） ，这样一来也增加了样式难于维护。幸运的是，我们可以在 reset.css 样式文件中重置 <button> 的样式，让所有客户端初始的样式更趋于统一，也更利用按钮样式的美化：

button {
    padding: 0;
    border: none 0;
    font: inherit;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
}

这样一来，按钮在Web上看上去就像是一个文本。像下图这样：

这样做，虽然样式上在不同的客户端趋于统一（看上去更像文本）。但这样一来，我们就必须对所有按钮添加样式，否则用户将无法识别它们。

给按钮添加样式

现在我们已经重置了 <button> 元素在各客户端下的样式，让他们都趋于统一。但按钮毕竟是按钮，和文本是不一样的（样式上看上去应该是不一样的），因此我们就需要给其添加自己定义样式（根据你的需求来添加）。比如下面这样的示例代码：

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    text-decoration: none; /*for <a> link*/

    margin: 2px;

    border: 1px solid transparent;
    border-radius: 4px;

    padding: .5em 1em;

    color: #fff;
    background-color: #9555af;
}

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

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

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

其实客户端，比如浏览器已经为 <button> 的 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 ( HSL 中的 H )、 --saturation ( HSL 中的 S )和 --light （ HSL 中的 L ）
• 使用 HSL 方式来设置 background-color

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

: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() ，借助 <input> 我们可以很好的做一些动态计算，这样可以很好的看到修改三个自定义属性时，对按钮背景颜色的变化：

上面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 和 W3C方法 算法（公式）：

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

: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 和 W3C方法 算法控制按钮背景色和文本色。如果我们想基于这个系统上来完成二级按钮样式颜色控制话。我们应该如何做呢？

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

• filter: hue-rotate(60) ：通过滤镜来完成，但这种方式会影响其子元素的颜色
• HSL hue + 60 ：重新计算 --h 变量值，在 --hue 值基础上增加 60 。因为 HSL 中的 H （其实就是Hue）参数在 360 时没有封顶这样的行为。因为它的行为类似一个角度，所以值超过 360 时并不会一直停留在该位置。比如说 400 ，其实相当于 40 （ 400 - 360 = 40 ）

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

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

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

总结

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