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

You can simply create override_default.css and include it at immediate next line to bootstrap library css, and then you are free to override anything. — art-fan-vikram, Feb 01 '15 at 09:40

score 146 · Answer 1 · edited Dec 07 '21 at 14:17

146

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.

edited Dec 07 '21 at 14:17

Amal K

4,359
2
22
44

answered Feb 01 '15 at 09:35

Gold Pearl

1,922
3
17
28

21

The `!important` was the key! – cdonts Mar 13 '16 at 20:32
18

That's not a good way to modify Bootstrap, the changes should be done via Less or Sass variables when building your own custom Bootstrap CSS. – Tim Feb 15 '18 at 02:03
6

If you just link to bootstrap before you link to your custom style sheet then your custom style sheet will take precedence. – dillon.harless Feb 06 '19 at 17:25

Carol Skelly · Answer 2 · 2023-04-11T13:25:30.510

Using `!important` is NOT the best idea

A better option is to use SASS to regenerate the btn-* CSS classes as desired using the appropriate SASS mixins...

Bootstrap 5 (update 2023)

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

Bootstrap 4 (update 2019)

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?

This post helped me in creating a purple button as seen in the home page of Bootstrap. — priyamtheone, Jul 07 '20 at 15:44
And for the slow witted like me, note that you need to do the overriding AFTER you import bootstrap itself, because that import contains the stuff you're about to include.and re-define. — philw, Nov 02 '20 at 11:13
`button-variant` requires only 2 arguments - `background` and `border` - rest is optional/autogenerated, I also like to specify the color explicitly so this is enough: `@include button-variant($bg, darken($bg, 7.5%), $textColor);` :-) — jave.web, Sep 02 '23 at 21:22

ckuijjer · Accepted Answer · 2015-02-01T09:55:37.733

40

The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).

A better way might be to:

Create your own customized version of Bootstrap using Bootstrap's online customization tool
Manually create your own color class, e.g. .btn-whatever
Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever

edited Feb 01 '15 at 09:55

answered Feb 01 '15 at 09:40

ckuijjer

13,293
3
40
45

I too think that creating a customized version of Bootstrap should be the ideal way to go about this, as there might be a lot of properties to change. Thanks. – Sam Feb 03 '15 at 16:43
in step 3 - I try to create LESS mixin on using .btn-primary, but :hover is not working. How should I mixing the hover state? – Yevgeniy Afanasyev Dec 15 '15 at 00:50

Semyon Zhikharev · Answer 4 · 2015-02-01T09:42:10.747

36

I guess you forgot .btn-primary:focus property and comma after .btn-primary

You also can use less and redefine some colors in variables.less file

With this in mind your code will be look like this:

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

edited Feb 01 '15 at 09:42

answered Feb 01 '15 at 09:36

Semyon Zhikharev

634
5
10

Then there's border color, which still remains blue. I guess less is the way to go for this, right? – Sam Feb 01 '15 at 09:40
You can redefine border as well. – Semyon Zhikharev Feb 01 '15 at 09:41
I also had to change the background image before it changed color: `background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%);` or `background-image: none;`. – SharpC Nov 03 '16 at 09:08

score 16 · Answer 5 · answered Mar 31 '17 at 13:13

16

Just create your own button on:

http://blog.koalite.com/bbg/
add the CSS at the end off your boottrap.min.css

Cheers

answered Mar 31 '17 at 13:13

Ron

177
1
2

This is nice and simple – ow3n Jul 01 '20 at 18:32

score 8 · Answer 6 · answered Jul 07 '19 at 11:06

8

Remove the button color class like "btn-success" and put a custom class like "btn-custom" and write css for that class. That simply works for me.

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

answered Jul 07 '19 at 11:06

Manab Das

111
1
4

With this, you lose e.g. hover behaviour. – Chris Peacock Feb 17 '23 at 17:39

GavinBelson · Answer 7 · 2021-02-15T18:25:50.197

The simplest way is to:

intercept every button state
add !important to override the states

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:visited,
    .btn-primary:focus {
      background-color: black !important;
      border-color: black !important;
    }

OR the more practical UI way is to make the hover state of the button darker than the original state. Just use the CSS snippet below:

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

score 6 · Answer 8 · answered Dec 27 '17 at 09:18

6

You have missed one style ".btn-primary:active:focus" which causes that still during btn click default bootstrap color show up for a second. This works in my code:

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

answered Dec 27 '17 at 09:18

Stanislav Vincent

621
7
7

You saw the problem others didn't, but this doesn't fix it for me. – Steve Lautenschlager Jun 18 '18 at 15:43

score 4 · Answer 9 · answered Jun 02 '22 at 09:53

4

A lot of complex and lengthy CSS here when all you need is this if you want to cover the whole button with one color including the button border:

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

answered Jun 02 '22 at 09:53

Olney1

572
5
15

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the [help center](https://stackoverflow.com/help/how-to-answer). – Ethan Jun 04 '22 at 13:53

clamchoda · Answer 10 · 2019-12-23T20:04:23.513

Here's my flavor without the loss of hover. I personally like it better than the standard bootstrap transitioning.

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

.btn-primary:hover {
  background-color: #594671 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

score 2 · Answer 11 · answered Sep 07 '17 at 15:24

I had run into the similar problem recently, and managed to fix it with adding classes

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

Also pay attention to [disabled] and [disabled]:hover, if this class is used on input[type=submit]. Like this:

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

score 2 · Answer 12 · answered Apr 25 '20 at 09:36

Adding a step-by-step guide to @Codeply-er's answer above for SASS/SCSS newbies like me.

Save btnCustom.scss.

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

.btn-custom {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-custom {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

Download a SASS compiler such as Koala so that SCSS file above can be compiled to CSS.
Clone the Bootstrap github repo because the compiler needs the button-variant mixins somewhere.
Explicitly import bootstrap functions by creating a _bootstrap.scss file as below. This will allow the compiler to access the Bootstrap functions and variables.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

Compile btnCustom.scss with the previously downloaded compiler to css.

score 2 · Answer 13 · answered Nov 24 '20 at 14:38

2

You can add custom colors using bootstrap theming in your config file for example variables.scss and make sure you import that file before bootstrap when compiling.

$theme-colors: (
    "whatever": #900
);

Now you can do .btn-whatever

answered Nov 24 '20 at 14:38

Salam

1,126
14
20

score 0 · Answer 14 · answered Nov 28 '17 at 06:39

I think using !important is not a very wise option. It may cause for many other issues specially when making the site responsive. So, my understanding is that, the best way to do this to use custom button CSS class with .btn bootstrap class. .btn is the base style class for bootstrap button. So, keep that as the layout, we can change other styles using our custom css class. One more extra thing I want to mention here. Some people are trying to remove blue outline from the buttons. It's not a good idea because that accessibility issue when using keyboard. Change it's color using outline-color: instead.

score 0 · Answer 15 · answered Nov 12 '20 at 09:40

I am not the OP of this answer but it helped me so:

I wanted to change the color of the next/previous buttons of the bootstrap carousel on my homepage.

Solution: Copy the selector names from bootstrap.css and move them to your own style.css (with your own prefrences..) :

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

Mathias Osterhagen · Answer 16 · 2022-04-27T11:03:19.580

Here is my participation for the "outline" button:

Replace #8e5b5b with your color and #b3a7a7 by your color but usually more bright.

.btn-outline-custom{
  color: #8e5b5b;
  border-color: #8e5b5b;
}

.btn-outline-custom:focus{
  box-shadow: 0 0 0 0.2rem #b3a7a7;
  -webkit-box-shadow: 0 0 0 0.2rem #b3a7a7;
  outline: 0;
}

.btn-outline-custom:hover,
.btn-outline-custom:active{
  color: #fff;
    background-color: #8e5b5b;
    border-color: #8e5b5b;
}

score 0 · Answer 17 · answered Nov 14 '22 at 18:39

As of Bootstrap 5, the right way to do this is to simply override the $primary theme colour:

Simply add the following to your Bootstrap overrides file (ie: could be named 'Core.scss' for example:

//
// Bootstrap
//
// overrides
$primary: /*new colour*/orange;

Here is the official docs: https://getbootstrap.com/docs/5.0/customize/sass/#modify-map

How to change btn color in Bootstrap

17 Answers17

Using `!important` is NOT the best idea

Linked

Related

How to change btn color in Bootstrap

17 Answers17

Using !important is NOT the best idea

Linked

Related

Using `!important` is NOT the best idea