按钮上的悬停效果答案

【问题标题】：Hover effect on button按钮上的悬停效果
【发布时间】：2017-03-11 10:40:56
【问题描述】：

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

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

}

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

【问题讨论】：

标签： css button

【解决方案1】：

如果您使用的是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%);
}

否则，另一个技巧是将opacity更改为:hover：

#addToCart:hover {
  opacity: 0.9;
}

【讨论】：

谢谢，但此代码一定与其他一些 css 变量冲突，因为该站点现在仅显示为文本。请指教
当我添加#addToCart:hover 元素时会发生这种情况
去掉$color
完美，不透明度成功了 :) 非常感谢。您能否建议我如何为按钮的颜色添加渐变？

【解决方案2】：

这可能对你有帮助！

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

}
#addToCart:hover{background-color:#209bc7}

&lt;button id="addToCart"&gt;Button&lt;/button&gt;

【讨论】：