Twitter bootstrap, buttons hover style?

Twitter bootstrap, buttons hover style?

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
Take a Tour

.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 ?


Solution 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 }

Solution 2:

If you have a set a background image for a button, the background shifts up by 15px on hover. You can set it to 0px.

.tour_btn:hover {
   background-position: 0px !important;

Solution 3:

When using custom css instead of LESS to style your buttons, try You will get all css for your custom buttons including hover effect and disabled / active states.

Related:  twitter bootstrap 3 input-group-addon not all the same size

For the button above you could use possible: {
  color: rgba(255, 255, 255, 0.75);
.btn-custom-lighten {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f29461;
  background-image: -moz-linear-gradient(top, #f1874e, #f5a77d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d));
  background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d);
  background-image: -o-linear-gradient(top, #f1874e, #f5a77d);
  background-image: linear-gradient(to bottom, #f1874e, #f5a77d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0);
  border-color: #f5a77d #f5a77d #ef7736;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #f5a77d;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
.btn-custom-lighten[disabled] {
  color: #ffffff;
  background-color: #f5a77d;
  *background-color: #f39766;
.btn-custom-lighten:active, {
  background-color: #f1874e ;


<button class="btn btn-custom-lighten btn-large">Your button</button>

Add the CSS below /after your bootstrap(.min).css
Using this css let’s you custom button effects work in most browsers.

Solution 4:

you can specify what you want the CSS to be when a button is hovered with the css :hover property.

So in your case you will want to do something like

.tour_btn:hover {
    /* your custom css */

Using chrome developer tools you should be able to see what kind of gradients are currently being applied by bootstrap and then override them with your css.

Related:  How to get Twitter Bootstrap Modal's invoker element?

Solution 5:

.tour_btn:hover {
     background-color: #a35b35;
     background-position: 30px 30px;

i found this solution you can try this . it works with simple code