How to change btn color in Bootstrap

Question

Is there a way to change all .btn properties in Bootstrap? I have tried below ones, but still sometimes it shows the default blue color (say after clicking and removing the mouse etc). How can I change the entire theme altogether?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {     background-color: #8064A2; } 

Answer 1

If you want to override any default properties in Bootstrap you have to make the properties as important.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {     background-color: #8064A2 !important; } 

I hope this works for you.

Answer 2

2022 Update for Bootstrap 5

Bootstrap 5 has the same button-variant and button-outline-variant SASS mixins which can be used to customize the button color after bootstrap is imported...

/* import the Bootstrap */ @import "bootstrap";  /* ------- customize primary button color -------- */    $mynewcolor:#77cccc;  .btn-primary {     @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%)); }  .btn-outline-primary {     @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor); }  

https://codeply.com/p/UNvB5hRsfF

---

2019 Update for Bootstrap 4

Now that Bootstrap 4 uses SASS, you can easily change the primary button color using the button-variant mixins:

$mynewcolor:#77cccc;  .btn-primary {     @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%)); }      .btn-outline-primary {     @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor); } 

https://codeply.com/p/JnV3xDDiaH (SASS demo)

This SASS compiles into the following CSS...

.btn-primary {     color: #212529;     background-color: #7cc;     border-color: #5bc2c2 }  .btn-primary:hover {     color: #212529;     background-color: #52bebe;     border-color: #8ad3d3 }  .btn-primary:focus, .btn-primary.focus {     box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5) }  .btn-primary.disabled, .btn-primary:disabled {     color: #212529;     background-color: #7cc;     border-color: #5bc2c2 }  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle {     color: #212529;     background-color: #9cdada;     border-color: #2e7c7c }  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus {     box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5) }  .btn-outline-primary {     color: #7cc;     background-color: transparent;     background-image: none;     border-color: #7cc }  .btn-outline-primary:hover {     color: #222;     background-color: #8ad3d3;     border-color: #7cc }  .btn-outline-primary:focus, .btn-outline-primary.focus {     box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5) }  .btn-outline-primary.disabled, .btn-outline-primary:disabled {     color: #7cc;     background-color: transparent }  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show>.btn-outline-primary.dropdown-toggle {     color: #212529;     background-color: #8ad3d3;     border-color: #7cc }  .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {     box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5) } 

https://codeply.com/go/lD3tUE01lo (CSS demo)

---

To change the primary color for all classes see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?