使用 CSS 增强按钮变暗
将鼠标悬停在按钮上时，通常通过稍微调暗背景颜色来增强其视觉效果。虽然手动确定较暗的十六进制代码是可行的，但它可能很乏味。
输入 CSS 的 Shadowy Technique
一个轻松的替代方案是使用在按钮上分层深色背景图像背景图像。这种方法保留了按钮的文本颜色，同时仅影响背景：
.button {
display: inline-block;
color: #fff;
padding: 10px 20px;
font-size: 20px;
background-color: red;
}
.button:hover {
background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}这会在按钮顶部添加 40% 不透明度的黑色线性渐变，有效地在悬停时使其变暗。生成的代码：
<div class="button"> some text </div> <div class="button">
因此，下次您需要在悬停时使按钮的背景变暗时，请利用 CSS 的阴影投射功能来实现轻量级且可自定义的解决方案。
以上是如何使用 CSS 使悬停按钮变暗？的详细内容。更多信息请关注PHP中文网其他相关文章！
