一般网页中的按钮会对应三张背景图片,normal状态,hover状态,active状态 如果每个按钮都要设计三张图片,编写三种样式,会消耗很多时间 当我们对背景状态切换没有特殊需求时,可以通过filter来实现一个通用的状态切换功能
button {
&:hover {
filter: brightness(0.95);
}
&:active {
filter: brightness(0.85);
}
}
只需几行代码,就可以省掉所有按钮的hover,active样式代码!