Change hover color on a button with Bootstrap customization

I am trying to style my buttons in a way that the hover makes the button a lighter shade instead of a darker shade. I tried bootstrap customization page() and it doesn't give me an option to change the button hover color. I tried doing this manually by inspecting the CSS but it is unclear how the buttons are getting the hover color. I tried another bootstrap customization website

I wanted the main color to be #0495c9 and the hover color to be #00b3db but I am only able to specify the button bg color and not it's hover color.

Any help will be appreciated

4 Answers

The color for your buttons comes from the btn-x classes (e.g., btn-primary, btn-success), so if you want to manually change the colors by writing your own custom css rules, you'll need to change:

/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/ .btn-primary { color: #fff; background-color: #0495c9; border-color: #357ebd; /*set the color you want here*/ } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { color: #fff; background-color: #00b3db; border-color: #285e8e; /*set the color you want here*/ } 

or can do this...
set all btn ( class name like : .btn- + $theme-colors: map-merge ) styles at one time :

@each $color, $value in $theme-colors { .btn-#{$color} { @include button-variant($value, $value, // modify $hover-background: lighten($value, 7.5%), $hover-border: lighten($value, 10%), $active-background: lighten($value, 10%), $active-border: lighten($value, 12.5%) // /modify ); } } // code from "node_modules/bootstrap/scss/_buttons.scss" 

should add into your customization scss file.

I had to add !important to get it to work. I also made my own class button-primary-override.

.button-primary-override:hover, .button-primary-override:active, .button-primary-override:focus, .button-primary-override:visited{ background-color: #42A5F5 !important; border-color: #42A5F5 !important; background-image: none !important; border: 0 !important; } 

This is the correct way to change btn color.

 .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{ color: #fff; background-color: #F7B432; border-color: #F7B432; }