按钮上的悬停效果

Question

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

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

}

我想在按钮上添加悬停效果，使颜色深 10%。

Answer 1

如果您正在使用SASS，您可以添加一个变量darken并:hover在您的 中使用和CSS，如下所示：

$colour: #00AFEF;

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

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

否则，另一个技巧是更改opacitywith :hover：

#addToCart:hover {
  opacity: 0.9;
}