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
This question is related to
html
css
responsive-design
twitter-bootstrap-3
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.
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;
}
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;
}
Source: Stackoverflow.com