悬停在按钮上的效果

Question

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

<table>
    <tr>
        <td colspan="2">hello</td>
    </tr>
</table>

我想在按钮上添加悬停效果，使颜色变暗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%);
}

否则，另一个技巧是使用opacity更改:hover：

#addToCart:hover {
  opacity: 0.9;
}

Answer 2

这可能会对你有帮助！

＆＃13;

＆＃13;

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

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

＆＃13;

<button id="addToCart">Button</button>

＆＃13;

＆＃13;

＆＃13;