我无法告诉你这些年来我实现过多少次自定义的 “按钮” 样式 CSS 实现。 这些年来,我使用过图像、背景、渐变和不透明度来有效地 “突出显示” 控件。 所有这些当然都有效,但大多数这些方法的问题在于,你最终都会硬编码颜色值、图像或渐变。
如果你指定确切的颜色,你当然会拥有更多控制权,但如果你能以一种在你的网站上感觉一致的方式实现亮化、暗化,甚至色调偏移,那么这无疑会减少很多需要维护的代码。
.button.specific-button {
background: #4CAF50;
}
.button.specific-button:focus,
.button.specific-button:hover {
background: #A5D6A7;
}
/* vs. */
.button:focus,
.button:hover {
filter: brightness(120%);
}
/* or maybe you're super hardcore and do it everywhere */
:focus,
:hover {
filter: brightness(120%) saturate(120%);
}
很棒的技巧,我一直用 brightness 来处理图像,但我忘了它也可以用在按钮上。 谢谢!
我已经这么做了两年了,而且我非常满意。 ✌️