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

公開日: 2019/12/03

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

  "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 */
  );
}

補遺