html - CSS 按钮、默认颜色、悬停颜色和 :active color change

Question

首先是我的按钮代码；

HTML

<asp:Button Text="Register" ForeColor="#ffffff" BackColor=" #ba04c2" ID="btnReg" CssClass="btnReg" runat="server" OnClick="btnReg_Click" />

CSS

.left-side .fast-reg .alt .btnReg{
 width: 100px;
 height: 40px;
 margin-top: 10px;
 line-height: 40px;
 text-align: center;
 float: right;
 -webkit-transition-duration: 0.4s; 
 transition-duration: 0.4s;

}
.btnReg:hover {
    background-color: #d053f5; 
    
}

.btnReg:focus {
    background-color: #3e0442; 
    
}

我想更改按钮的默认颜色、悬停颜色和按下时的颜色。

例如按钮的颜色为紫色，当光标出现在按钮上时，颜色会变得清晰。单击按钮时，颜色会更深。

我将 BackColor="#colorcode" 放在 asp:button 部分，但是当我这样做时，悬停被停用了。

如何在 hover 和 :active 功能未被停用时更改按钮颜色？

Answer 1

当您设置 asp:Button 的 BackColor 属性时，它实际上会像这样以 HTML 呈现:

<input type="button" style="background-color: #ba04c2; ..." />

您在上述input 元素中看到的style 属性称为内联样式。由于“ CSS Specificity ”，大多数情况下内联样式会自动胜过 CSS 定义。在 CSS 世界中，每个样式都有自己的权重，它们分别根据该权重应用于元素。

因此，如果您想覆盖 CSS 中的内联样式，您必须通过将 !important 添加到您的 CSS 定义中来强制执行它，如下所示。

.btnReg:hover {
    background-color: #d053f5 !important; 
}