Change hover color on a button with Bootstrap customization

Question

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 http   getbootstrap com customize   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  http   pikock github io bootstrap-magic app    editor  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

User · Answer

This is the correct way to change btn color     btn-primary not  disabled  not  disabled  active        btn-primary not  disabled  not  disabled  active        show gt  btn-primary dropdown-toggle          color   fff          background-color   F7B432          border-color   F7B432

User · Answer

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

User · Answer

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

User · Answer

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 gt  dropdown-toggle btn-primary       color   fff      background-color   00b3db      border-color   285e8e    set the color you want here

[html] Change hover color on a button with Bootstrap customization

Examples related to html

Examples related to css

Examples related to responsive-design

Examples related to twitter-bootstrap-3