【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产
2024-10-08 04:48:20
文章转载自 张鑫旭-鑫空间-鑫生活 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效果:
最新文章
- 俄罗斯方块C#版
- jquery in confluence.
- centos7 &; mysql
- Oracle buffer cache
- 2016/10/28 很久没更了 leetcode解题 3sumcloset
- C# 字符串详细使用
- <;转>;详解DNS的常用记录(下):DNS系列之三
- ###《Machine Learning》by Andrew NG
- php多线程即时通讯
- 【Android接口实现】ActionBar利用整理的一些细节
- poj 2804 字典 (特里 要么 快排+二分法)
- Linux系统操作指令汇总
- Mac下使用数据库将Excel数据转换存入.plist
- 详解设计模式在Spring中的应用
- 配置IDM不限速下载百度云的大文件
- 深入FM和FFM原理与实践
- parquet 简介
- jQuery获取包括当前元素的HTML
- winscp 怎么用私钥文件登录的,以.ppk结尾的密钥文件
- 雷林鹏分享:查看 XML 文件