html - Twitter bootstrap, buttons hover style?

Question

I am trying to use gradient style for my buttons, but, I have a problem with hover style, Here is the button before hover:

And here is after hover:

Here is haml of button:

= link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do
        %h3
          Take a Tour

LESS:

.tour_btn {
    #gradient > .vertical(#F98C51, #a35b35);
}

Any idea please ? is it possible to specify another gradient style for hover state ? Or at least, not to change button when hover ?

Answer 1

Twitter Bootstrap animates the background-position on hover with a transition (since background-gradients cant have a transition). What is happening in your case, is the background-gradient is getting shifted up with background-position: -15px, and you are seeing the background-color underneath.

To fix this set your background-color to the bottom color of your button gradient on hover:

.tour_btn {
    #gradient > .vertical(#F98C51, #a35b35);
    &:hover { background-color: #a35b35 }
}