All buttons hover styling in Twitter Bootstrap

Question

I would like to change default styling for hover buttons (Bootstrap v3.2). By default it's becoming darker. Let's assume I would like to make it lighter.

I looked at Buttons Less variables but I don't see button hover styling option.

In SASS I can do:

@import "packages/stylesheets/bootstrap/bootstrap";

.btn {
  &:hover {
    background: yellow;
  }
}

but it changes all button background to defined color (in this case yellow).

Is it possible to do it for all buttons?

The only solution I found id to do it this for each type of button this way but I hope it can be done for all buttons a bit simpler:

@import "packages/stylesheets/bootstrap/bootstrap";

.btn-primary {
  &:hover {
    background: lighten($btn-primary-bg, 5%);
  }
}
.btn-success {
  &:hover {
    background: lighten($btn-success-bg, 5%);
  }
}

Answer 1

While Marcin's solution will work, as he mentioned it is not very elegant as you will modify bootstrap's source code and you will loose all the edits once you update the base of bs.

What you need to do, in order to properly customize the button hover is, define a new file called for example "_buttons.scss" and include it in your main bootstrap/main file you are using (usually a file that include the base boostrap + the customized parts):

// Base bootstrap 3
@import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
@import "_buttons.scss"

This way you are overriding default styles in order to have your look and feel of default bootstrap elements, and keeping base bootstrap file intact so you can update it without a fear you will overwrite your changes with next update.

And now, your part: in the _buttons.scss define your hovers like you mentioned:

// My custom variation for btn-primary
.btn-primary {
  &:hover {
    background: lighten($btn-primary-bg, 5%);
  }
}

If you want to do that on global level, just simply update the mixins that are in charge for buttons output in the override file, so that would be (if you follow your Bootstrap's default namespace, in your custom styles folder for example: myproject/assets/scss/mixins/_buttons.scss)

// My custom mixin for button-variant override file
// I only include the part i want to customize
// In this case, i want to customize background-color 
@mixin button-variant($color, $background, $border) {
  &:hover {
    background-color: darken($background, 40%);
  }
}

.. and include it into your main file

// Base bootstrap 3
@import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
@import "_buttons.scss"
@import "mixins/_buttons.scss"

This way you are: 1) Able to update bootstrap base once the update is up 2) Able to keep your custom buttons styles in one file, if you decide to update it later, you can find it easily 3) Able to use same bootstrap base for different projects (if needed)

Hope it helps Cheers M.

Answer 2

The solution I found is not very elegant (you need to modify bootstrap file) but it works.

You need to go to mixins/_buttons.scss file and then change:

background-color: darken($background, 10%);

into

background-color: lighten($background, 10%);

It should do the job for all buttons.