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

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

}


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

最佳答案

如果使用的是SASS,则可以添加一个变量,并在darken中使用:hoverCSS,如下所示:

$colour: #00AFEF;

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

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


否则,另一个技巧是用opacity更改:hover

#addToCart:hover {
  opacity: 0.9;
}

07-24 09:45
查看更多