Bootstrap 4 自訂按鈕顏色

最近發現Bootstrap 4 出來了，無聊玩一玩研究一下，剛好也有用到，打一下怎麼自訂按鈕顏色

按照官方網站的說法，應該是要重新定義SCSS的變數，再重新編譯，但我不太會就直接自訂一個css

以下以btn-primary為例，html如下

<button type="button" class="btn btn-primary">Primary<button>;

基本的class的就是.btn-primary，而滑鼠移過去的就是.btn-primary:hover，按下滑鼠的是.btn-primary:focus，然後按下去的時候會閃一下原始的顏色，這個比較難找，但應該是這個.btn-primary:active:hover

以下是完整css

.btn-primary {
  color: #fff;
  background-color: brown;
  border-color: brown;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active:hover{
  color: #fff;
  background-color: brown;
  border-color: brown;
}

如果使用outline的button，所有class都要改成btn-outline-primary，而outline的button還有個active的事件要改顏色，用這個.btn-primary:active

例如下面兩個outline的button

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>

Css如下

.btn-outline-primary {
  color:brown;
  background-color: #fff;
  border-color: brown;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active:hover{
  color: #fff;
  background-color: brown;
  border-color: brown;
}

而官網有提到可以將btn的樣式放在checkbox或radio，我只試了radio，比較不一樣的是，選取了之後會多一個active或focus的class，active是在選取的時候加入，focus則在滑鼠點選的時候加入，因此這兩個class顏色都要再定義一次，還有hover的顏色也是，但只要選其中一個class定義就好，例如.btn-outline-primary.active:hover

例如html如下

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2(preselected)
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3(preselected)
  </label>
</div>

完整Css

.btn-outline-primary {
  color:brown;
  background-color: #fff;
  border-color: brown;
}
.btn-outline-primary:hover,
.btn-outline-primary:active:hover, .btn-outline-primary.active:hover{
  color: #fff;
  background-color: brown;
  border-color: brown;
}
.btn-outline-primary.active,
.btn-outline-primary.active.focus {
  border-color: brown;
  color: white;
  background-color:brown;
}

Bootstrap 4 按鈕官網連結