Why css button background color doesn't change on hover, when there is a background color defined?

Asked Mar 23 '20 at 10:16

Active Mar 23 '20 at 10:23

Viewed 17 times

I have 2 buttons that should change the background color on hover. The ghost button does that, because it has got no background color defined, while full button keeps its original color.

I made it work by adding !important to hover and active state background color, but I believe that is just a quick and dirty solution, and there must be a better way?

.btn:hover,
.btn:active {
    background-color: #b05d14; 
}

.btn-full:link,
.btn-full:visited {
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #fff;    
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #e67e22;
    color: #e67e22;
}

asked Mar 23 '20 at 10:16

Emka

Is it button or link? you cannot expect button to behave like link. – Manjuboyz Mar 23 '20 at 10:19
It's a button: `I’m hungry`. And another mutual class I am using is .btn: `.btn:link, .btn:visited { display: inline-block; padding: 10px 30px; font-weight: 300; text-decoration: none; border-radius: 200px; }` – Emka Mar 23 '20 at 10:21
the hover should be placed after – Temani Afif Mar 23 '20 at 10:22
Thank you, that helped! Haven't thought about the priority! – Emka Mar 23 '20 at 10:23

Why css button background color doesn't change on hover, when there is a background color defined?

0 Answers0