CSS按钮，默认颜色，悬停颜色和：active颜色更改

Question

first of all there is my button's code;

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; 

}

I want to change the default color for my button, hover color and when it is pressed.

For example, the color of the button is purple, when cursor will appear on the button and the color will become clear. When the button gets clicked, the color will be more darker.

I put BackColor="#colorcode" to asp:button part, but when I do that, hover is being deactivated.

How can I change the button color while hover and :active function is not being deactivated?

Answer 1

When you set the BackColor property of an asp:Button it actually gets rendered in HTML like this:

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

The style attribute that you see in foregoing input element is called inline styling . And most of the cases inline styling automatically wins over CSS definitions because of the " CSS Specificity ". In CSS world every styling has its own weight and they are applied to an element respectively to that weight.

So, if you want to override an inline style in your CSS you have to force it by adding !important to your CSS definition as follows.

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