[Bootstrap 4] Bootstrap 4 のボタンカラーを変更する方法
またはカラーバリエーションを増やす方法。
"dependencies": {
"bootstrap": "4.3.1",
"jquery": "^3.3.1",
},
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 を利用しましょう。
このような形で利用してみました。
フォントカラーは別途定義する必要があるようです。
ここでは !important
で定義してあります。
@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 */
);
}