如何使用 CSS 使悬停按钮变暗？

使用 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中文网其他相关文章！