CSS Gradient (hover) not working properly

Question

I am working on a BootStrap page, and attempting to modify the CSS of the base button color, and the color change when hovering.

The button has a slight gradient effect on it. When the user hovers over the button, I want it to change color ever so slightly (while maintaining a gradient) to indicate the hover status.

The gradient I'm using is based on the background color. Makes my life easier for fall-back support on browsers.

Here is a JSFiddle showing exactly what I'm doing: http://jsfiddle.net/toddhd/5JybP/

.btn-inverse {
  background-color: #67e667;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #ffffff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  background-color: #5ee55e;
}

The problem is, while the button looks really nice, the hover effect seems broken. Instead of showing a nice gradient, it sort of "slides in from the bottom" and just shows two horizontal bars of colors.

In this example, I'm only changing the background color, but I've also tried re-declaring every single CSS property just like the initial class. Same problem occurs.

What am I doing wrong?

Answer 1

If you want to overwrite bootstrap classes use an id. It is better to keep bootstrap bootstrap so to ensure everything works as it should (think layouts, modal windows, etc) and what you see in the demos is what you get. Right now you are overwriting bootstrap with your own class.

Your issue is that bootstrap is declaring a background-position: 0 -15px that is not being taken into account by your code. This can be overwritten by including background-position: 0. I changed the background-color to red to more clearly demonstrate that it is working, do change it back. :)

Here is the fiddle: http://jsfiddle.net/5JybP/8/

Here is the code:

HTML

<a href="#" id="btn-inverse" data-toggle="dropdown" class="btn btn-inverse btn-small dropdown-toggle">
    Logged in as Todd<span class="caret"></span>
</a>

CSS

#btn-inverse {
  background-color: #67e667;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #ffffff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

#btn-inverse:hover,
#btn-inverse:focus,
#btn-inverse:active,
#btn-inverse.active,
#btn-inverse.disabled,
#btn-inverse[disabled] {
  background-color: red;
  background-position: 0;
}

Joshua