Css 按钮上的悬停效果

我的“添加到购物车”按钮有以下代码

---

我想在按钮上添加一个悬停效果，使颜色变暗10%。

如果您使用的是

SASS

，您可以添加一个变量并在

CSS

中使用

darken

和

：hover

，如下所示：

$colour: #00AFEF;

#addToCart {
  background-color: $colour;
  border-radius: 10px;
  width: 300px;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

}
#addToCart:hover {
  darken($colour, 10%);
}

否则，另一个技巧是使用

：悬停更改
不透明度
：

#addToCart:hover {
  opacity: 0.9;
}

这可能对你有帮助


#addToCart{
背景色：#00AFEF；
边界半径：10px；
宽度：300px；
高度：50px；
字号：18px；
字体大小：粗体；
光标：指针；
}
#addToCart:hover{背景色：#209bc7}
按钮
谢谢，但此代码必须与其他css变量冲突，因为网站现在才显示为文本。请注意，当我添加#addToCart:hover元素时会发生这种情况删除$colorperfect，不透明度起了作用：）非常感谢。你能告诉我如何给按钮的颜色添加渐变色吗？
#addToCart:hover {
  opacity: 0.9;
}