Marcin Nabiałek Marcin Nabiałek - 4 months ago 24
CSS Question

All buttons hover styling in Twitter Bootstrap

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

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.