CODEWITHSUNDEEP
htmlcssasp.nethover
mw1337
mw1337

Reputation: 3

CSS Button, default color, hover color and :active color change

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?

Upvotes: 0

Views: 7497

Answers (1)

Izzet Yildirim
Izzet Yildirim

Reputation: 650

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; 
}

Upvotes: 1

Related Questions