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 按鈕官網連結

One comment

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *