how to change bootstrap version 4 button color

Question

I can change the primary button color by changing the theme-color in bootstrap v4. But it affects all other components as well. How to set the primary button colour without affecting the theme color? I dont want to set brand-primary and achieve it.Any other alternatives?

Carol Skelly · Accepted Answer · 2019-06-12T11:13:58.550

2019 Update for Bootstrap 4.1+

Now that Bootstrap 4 uses SASS, you can easily change only the button color using the button-variant mixins. Since you only want to change the primary button color, and not the entire primary theme color, you need to use the button-variant mixins in SASS. You can set whatever $mynewcolor and/or lighten() and darken() percentages you'd like.

$mynewcolor:teal;

.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://www.codeply.com/go/f3uTwmsCVZ (SASS demo)

This SASS compiles into the following CSS...

.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}

.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.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(0,90,90,0.5)}

.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;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:#fff;background-color:#009a9a;border-color:teal}
.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(0,128,128,0.5)}

https://www.codeply.com/go/l9UGO7J6V1 (CSS demo)

To change the primary color for all contextual classes (bg-primary, alert-primary, etc..) see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?

Also see:
https://stackoverflow.com/a/50973207/171456
How to theme bootstrap

This should be the accepted answer, it covers all button states. — Andres SK, Nov 07 '18 at 15:01
To note that one can't have a font colour separate from the background colour, which is disappointing. — nicodemus13, Dec 12 '18 at 17:07
@nicodemus13 you mean you can't using the button-variant mixin? — Carol Skelly, Dec 12 '18 at 18:01
Yes, sorry, wasn't clear. The font colour is calculated from the background colour. — nicodemus13, Dec 13 '18 at 14:46
The arguments are `button-variant(background, border-color, hover:background-color, hover:background-color, active:background-color, active:background-color)` — Ikhlak S., Apr 27 '19 at 20:05
I couldn't get it to work. Then I added the above code **after** my `@import ../scss/bootstrap.scss` and it works! — Jarad, Aug 19 '20 at 22:33
This didn't cover the case where the button was focused and I hovered out. — Mahsan Nourani, Jan 24 '21 at 22:33

score 14 · Answer 2 · answered Jun 07 '18 at 16:05

14

You can add custom color or redefine colors by change them via variables in sass files (Bootstrap 4).

$theme-colors: (
   primary: red,
);
@import "~bootstrap/scss/bootstrap";

If you use same keys for your colors, you will redefine Bootstrap. Otherwise, with new keys you create new classes.

This example set primary color from blue to red.

answered Jun 07 '18 at 16:05

vml

177
1
4

for laravel 5.7, change theme color in _variables.scss. – shalini Jan 23 '19 at 12:59

Athul Nath · Answer 3 · 2018-06-01T04:04:32.093

13

Try this method

Add a class to the button , Here custom-btn and write the css for that in our stylesheet.

.btn-primary.custom-btn {
 background-color: #000;
 border-color: #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
 <button type="button" class="btn btn-primary custom-btn">Custom</button>
  <button type="button" class="btn btn-primary">Default</button>
</div>

edited Jun 01 '18 at 04:04

answered Mar 09 '18 at 03:57

Athul Nath

2,536
1
15
27

3

Please use the Bootstrap 4 **stable** version in your answers. Alpha is already very old. – Klooven Mar 09 '18 at 15:27
7

This doesn't cover the hover and active states. – Andres SK Nov 07 '18 at 15:00

score 7 · Answer 4 · answered Mar 09 '18 at 04:27

As per bootstrap documentation

Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger). These modifier classes are built from the $theme-colors map to make customizing the number and name of our modifier classes.

So If you change theme color then it will affect all.

Maybe you should add color in $theme-colors variable if you want to use that color other places as well.

score 3 · Answer 5 · answered Nov 21 '18 at 09:07

I had a similar problem: I wanted to make the button match its container colors.

So I created a btn class that adapts automatically to its parent color on page load. I'm pretty happy with the result (In fact I'm even creating a little plugin). JSfiddle here

/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

$(function() {

  const hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];

  function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  }
  function hexify(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }
  function darken(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "rgb(" + parseInt(0.9 * rgb[1]) + ',' + parseInt(0.88 * rgb[2]) + ',' + parseInt(0.87 * rgb[3]) + ')';
  }

  function getParentBackground($elem) {
    var color = $elem.css("background-color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentBackground($elem.parent()));
  }

  function getParentColor($elem) {
    var color = $elem.css("color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentColor($elem.parent()));
  }

  $('.btn-negative, .btn-outline-negative').each(function() {
    var bgColor = hexify(getParentBackground($(this).parent()));
    var color = hexify(getParentColor($(this).parent()));
    var rgb = getParentColor($(this).parent());
    this.style.setProperty('--btn-negative-color0', bgColor);
    this.style.setProperty('--btn-negative-color1', color);
    this.style.setProperty('--btn-negative-shadow-color', color + "88");
    this.style.setProperty('--btn-negative-color2', hexify(darken(rgb)));
    this.style.setProperty('--btn-negative-color3', hexify(darken(darken(rgb))));
  });

});

/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

.btn-negative::before,
.btn-outline-negative::before {
  --btn-negative-color0: #fff;
  --btn-negative-color1: #000;
  --btn-negative-color2: #000;
  --btn-negative-color3: #000;
  --btn-negative-shadow-color: #0008;
}

.btn-outline-negative {
    background-color: var(--btn-negative-color0);
    border: solid 1px var(--btn-negative-color1);
    color: var(--btn-negative-color1);
}

.btn-negative,
.btn-outline-negative.active,
.btn-outline-negative:hover:not(.disabled):not([disabled]),
.btn-outline-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color1);
    color: var(--btn-negative-color0);
}

.btn-negative.active,
.btn-negative:hover:not(.disabled):not([disabled]),
.btn-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color2);
    color: var(--btn-negative-color1);
}

.btn-negative.active:hover,
.btn-negative:hover:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color3);
    color: var(--btn-negative-color1);
}

.btn-negative:focus,
.btn-outline-negative:focus {
    box-shadow: 0 0 0 .2rem var(--btn-negative-shadow-color);
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
    <div class="alert alert-success">
        <p>Some text...</p>
        <button class="btn btn-success">btn-success</button>
        <button class="btn btn-negative">btn-negative</button>
        <button class="btn btn-outline-success">btn-outline-success</button>
        <button class="btn btn-outline-negative">btn-outline-negative</button>
    </div>
</div>

Due to the CSS call order in the snippet, the style doesn't apply correctly.

Any idea to make it better is welcomed !

score 1 · Answer 6 · answered Mar 09 '18 at 01:45

1

You have to create a custom css sheet and override the button style or add the button a new class and override some of the properties.

<button class="btn-primary">Button</button>

.btn-primary{
    background-color:black;
}

<button class="btn-primary custom-btn-class">Button</button>

.custom-btn-class{
     background-color:black;
}

answered Mar 09 '18 at 01:45

Mauro Barrionuevo

155
1
1
8

2

I am looking for bootstrap 4 solutions – Janier Mar 09 '18 at 03:37
@Jocket So how is this not a BS 4 solution? – connexo Mar 09 '18 at 04:15

score -2 · Answer 7 · answered Nov 28 '18 at 20:21

-2

<a  class="btn btn-secondary" href="#">Find out more</a>



.featured  .btn-secondary {
     font-weight: bold;
     background-color: blue;
}

Just edit in css it works for me

answered Nov 28 '18 at 20:21

Justas

19
6

how to change bootstrap version 4 button color

7 Answers7

Linked

Related