Reputation: 1840
I don't know what's wrong with my CSS. I'm trying to create a new class called "btn-success2" with new colors by modifying default bootstrap colors. I'm trying to set my hover color to white but it only changes half of it. The top part is still the same green color.
My code as below:
.btn-success2:hover,
.btn-success2:focus,
.btn-success2:active,
.btn-success2.active,
.btn-success2.disabled,
.btn-success2[disabled] {
color: #ffffff;
background-color: #fff;
*background-color: #fff;
}
.btn-success2:active,
.btn-success2.active {
background-color: #6cc334 \9;
}
jsfiddle: https://jsfiddle.net/ms4uk83e/
Upvotes: 1
Views: 1920
Reputation: 8414
I recently had the same problem but I knew the following code had worked previously and some other change had caused this issue:
.btn:hover,
.btn:focus {
background-position: 0 -15px;
}
So I was sceptical of the other answers' suggestion of changing the background-position
from -15px
to -30px
, plus I could see from the Bootstrap code that the stock buttons also had -15px
for hover/focus.
It turned out I had a duplicate CSS declaration for my particular btn type (.btn-primary
in my case). Removing the duplicate CSS fixed the issue for me.
Upvotes: 0
Reputation: 21
In .btn:hover
: {background-position: 0 -15px;}
,
change -15
to -30
can work. But may not your real intention.
Upvotes: 1
Reputation: 538
You had: background-position: 0 -15px;
Change the -15px to 30.
.btn:hover, .btn:focus {
background-position: 0 -30px;
}
Upvotes: 2
Reputation: 1490
It's because of background-position: 0 -15px; to .btn:hover, .btn:focus class. Try this,
.btn:hover,
.btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -30px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
Upvotes: 2