Html 如何使用CSS使悬停时的按钮背景颜色稍微暗一点

在我的应用程序中，我的React项目中的按钮有以下css代码：

.Button {
  background-color: #somehex;
}

当用户将鼠标悬停在按钮上时，我希望背景颜色稍微深一点。我已经尝试过改变不透明度，但这不起作用，目前我正在这样做：

.Button:hover {
    transition: 0.2s ease-in;
    background-color:  #ALittleDarkerHex;
}

---

虽然这个过程可行，但它确实很乏味，因为我必须手动寻找我正在使用的颜色的较暗版本。我想知道是否有一种更简单的方法可以使用CSS使按钮的背景颜色变暗。

使用

背景图像在按钮顶部添加一个暗层

。按钮{
显示：内联块；
颜色：#fff；
填充：10px 20px；
字体大小：20px；
背景色：红色；
}
.按钮：悬停{
背景图像：线性梯度（rgba（0,0,0,0.4）0）；
}

一些文本
一些文本
一些文本
一些文本

这是一种方法

。按钮{
背景色：红色；
}
.按钮：悬停{
滤光片：亮度（60%）；
}

---

按钮

将伪元素放在按钮内容后面，并在悬停时修改其不透明度

const colors=['052F5F'、'005377'、'06A77D'、'D5C67A'、'F1A208'；
const btn=document.querySelector（'.Button'）；
btn.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
btn.style.backgroundColor=颜色[Math.floor（Math.random（）*colors.length）]；
});
。按钮{
背景色：#F1A208；
颜色：#fff；
边界：0；
边界半径：20px；
填充：10px 22px；
光标：指针；
位置：相对位置；
}
.按钮：之前{
内容：''；
位置：绝对位置；
z指数：0；
边界半径：20px；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0）；
过渡：放松；
}
.按钮跨度{
位置：相对位置；
z指数：1；
}
.按钮：悬停：之前{
背景色：rgba（0,0,0,3）；
}
悬停我
我喜欢这个主意，但改变亮度也会使按钮内的白色文本变暗。有没有办法避免这种情况？这能回答你的问题吗？