【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/

原文链接：https://www.zhangxinxu.com/wordpress/2018/11/css-filter-hue-rotate-button/

原文摘要：

传统按钮都是通过具体色值进行赋色的。有如下缺点：

1. 每种按钮还有不同的:hover和:active颜色需要额外设置，按钮CSS代码量较多，出现颜色也很多；
2. 如果出现新的状态按钮，例如今年流行紫色，需要一个紫色按钮。开发同学需要求助于设计师，因为自己选的紫色的亮度和饱和度往往和现有的按钮不搭。

实际上，有更简单的方法按钮赋色方法，可以规避上面的缺点，就是使用CSS3 filter滤镜中的hue-rotate()色调旋转滤镜。

我自己整理的代码：

<button class="btn">原按钮</button>
<button class="btn btn-red">红按钮</button>
<button class="btn btn-green">绿按钮</button>

<style>
    .btn {width: 100px;height: 45px;border: none;border-radius: 5px;cursor: pointer;background: #2486ff;color: #fff;transition: 0.5s;margin-right: 10px;font-size: 15px;}
    .btn:hover{background: #0160D5;}
    .btn-red{filter: hue-rotate(140deg);}
    .btn-green{filter: hue-rotate(300deg);}
</style>

hover效果：