文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/
原文链接：https://www.zhangxinxu.com/wordpress/2018/11/css-filter-hue-rotate-button/
原文摘要：
传统按钮都是通过具体色值进行赋色的。有如下缺点：
:hover和:active颜色需要额外设置，按钮CSS代码量较多，出现颜色也很多；实际上，有更简单的方法按钮赋色方法，可以规避上面的缺点，就是使用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效果：
【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产
原文：https://www.cnblogs.com/hzhjxx/p/11641611.html