[Bootstrap 4] Bootstrap 4 のボタンカラーを変更する方法

またはカラーバリエーションを増やす方法。

“`javascript
“dependencies”: {
“bootstrap”: “4.3.1”,
“jquery”: “^3.3.1”,
},
“`

CSS を上書きしようとするといろいろと書き換えが必要になります。

> – [css – how to change bootstrap version 4 button color – Stack Overflow](https://stackoverflow.com/questions/49184471/how-to-change-bootstrap-version-4-button-color)

上記で紹介されているコードを引用させてもらうと、このような内容となっています。
整形しています。

“`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 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 0.2rem rgba(0, 90, 90, 0.5);
}
“`

なかなかしんどいので button-variant mixins を利用しましょう。

> – [bootstrap/_buttons.scss at master · twbs/bootstrap](https://github.com/twbs/bootstrap/blob/master/scss/mixins/_buttons.scss)
> – [Bootstrap mixins · Bootstrap](https://martijncuppens.github.io/bootstrap-mixins-documentation/docs/4.1/mixins/#button-variant)

このような形で利用してみました。

フォントカラーは別途定義する必要があるようです。
ここでは `!important` で定義してあります。

“`scss
@import “node_modules/bootstrap/scss/bootstrap”;

$color-white: #fff;
$color-primary: #b6a269;

.btn-primary {
color: $color-white !important;

@include button-variant(
$color-primary, /* $background */
darken($color-primary, 7.5%), /* $border */
darken($color-primary, 10%), /* $hover-background */
lighten($color-primary, 5%), /* $hover-border */
lighten($color-primary, 10%), /* $active-background */
darken($color-primary, 30%) /* $active-border */
);
}
“`

## 補遺

> – [Twitter Bootstrap Mixins | deadwood](https://www.d-wood.com/blog/2019/10/25_11695.html)