65

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

1
  • Can you post your code or a link to jsFiddle? Aren't you able to simply use button { background-color: #0495c9 } and button:hover { background-color: #00b3db }? Sep 18, 2014 at 22:49

4 Answers 4

124

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*/
}
2
  • 17
    In addition you may also want to set .btn-primary:active:focus to prevent it flickering.
    – garryp
    Jul 26, 2016 at 12:01
  • 1
    In case it is not working, add !important after each colour
    – Pontios
    Oct 24, 2019 at 12:54
15

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.

1
  • 2
    You should add better explanation and proper example for those that do not know much SASS.
    – Mecanik
    Oct 9, 2021 at 6:25
2

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;
}
0

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;
    }
1

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.