我的“添加到购物车”按钮具有以下代码
#addToCart {
background-color: #00AFEF;
border-radius: 10px;
width: 300px;
height: 50px;
font-size: 18px;
font-weight: bold;
}
我想在按钮上添加一个悬停效果以使颜色变深10%。
最佳答案
如果使用的是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;
}