nodeffect
nodeffect

Reputation: 1840

CSS bootstrap button modification. Color only changes half when hover

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

Answers (4)

nickdos
nickdos

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

Zhixuan
Zhixuan

Reputation: 21

In .btn:hover : {background-position: 0 -15px;} , change -15 to -30 can work. But may not your real intention.

Upvotes: 1

Gcamara14
Gcamara14

Reputation: 538

You had: background-position: 0 -15px;

Change the -15px to 30.

.btn:hover, .btn:focus {
    background-position: 0 -30px;
}

Upvotes: 2

vedankita kumbhar
vedankita kumbhar

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

Related Questions