I am interested in customizing the hover button styling for Bootstrap v3.2. The default behavior is to darken on hover, but I would like to make it lighter instead.
Although I checked the Buttons Less variables, I couldn't find an option specifically for button hover styling.
In SASS, one solution is as follows:
@import "packages/stylesheets/bootstrap/bootstrap";
.btn {
&:hover {
background: yellow;
}
}
However, this code changes the background color for all buttons to yellow.
Is there a way to apply this change to all buttons without having to specify each button type individually?
The only workaround I have found is to customize each button type separately, like so:
@import "packages/stylesheets/bootstrap/bootstrap";
.btn-primary {
&:hover {
background: lighten($btn-primary-bg, 5%);
}
}
.btn-success {
&:hover {
background: lighten($btn-success-bg, 5%);
}
}