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 ?
Bootstrap Primary Button Hover Color In Bootstrap, a “primary” button is created by adding classes btn and btn-primary to a button element. If you desire to change the styling for the primary button, simply target the . btn-primary class in your CSS file.
Add data-toggle="buttons" to a . btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add . btn-group-toggle to style the <input> s within your buttons. Note that you can create single input-powered buttons or groups of them.
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 }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With