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
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*/
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments