如何实现CSS渐变按钮在hover状态下略微变暗的效果

方案1：使用filter调整亮度（最简便） #

无需修改原有渐变参数，仅需在hover状态新增亮度调整属性，数值越低变暗程度越高，0.9对应降低10%亮度，符合「略微变暗」的需求：

.button:hover {
  cursor: pointer;
  filter: brightness(0.9);
}

注意：该方案会同时调整按钮内所有元素（文字、图标等）的亮度

方案2：叠加半透黑色渐变层（不影响内部内容） #

如果希望仅背景变暗、文字等内容不受影响，可以在原有渐变上层叠加一层半透明黑色渐变，CSS背景支持同时写多层渐变，用逗号分隔即可，rgba(0,0,0,0.1)里的透明度数值越高，背景越暗：

.button:hover {
  cursor: pointer;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
                    linear-gradient(rgb(255, 255, 255), rgb(221, 221, 221));
}

方案3：直接修改原渐变色值 #

手动把原有渐变的两个色值调暗，适合需要精确控制最终色值的场景：

.button:hover {
  cursor: pointer;
  background-image: linear-gradient(rgb(235, 235, 235), rgb(200, 200, 200));
}

完整可运行示例（加过渡动画效果更丝滑） #

.button {
  padding: 2%;
  width: 14%;
  height: 23%;
  margin-top: 1%;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(221, 221, 221));
  /* 过渡动画， hover效果变化更柔和 */
  transition: all 0.2s ease;
}

.button:hover {
  cursor: pointer;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
                    linear-gradient(rgb(255, 255, 255), rgb(221, 221, 221));
}

<div id="buttonsmenu">
  <div class="button">按钮文本</div>
</div>

内容的提问来源于stack exchange，提问作者Marcheee