Zenn
😊

Bootstrap 5 、button / ボタン カスタム背景色の設定

2021/05/21に公開
Bootstrap
CSS
tech

概要:

Bootstrap 5 のボタン背景カスタム色の設定等の内容になります。

  • 方法は、複数ありそうですが、既存ボタンに、
    　CSSクラスを追加した例となります

環境

  • bootstrap : 5.0.1

関連

https://getbootstrap.com/docs/5.0/components/buttons/

https://getbootstrap.com/docs/5.0/customize/color/

見た目、外観

設定の例

  • 通常色 (btn-primary) 以外の色を適当に探して、CSSクラス追加

  • PC版hover等の色変更は無いので。追加する場合は、さらにCSS調整が必要

  • btn-secondaryを、仮に設定し。CSS追加

  • indigo , purpule , pink , orange , teal , cyan ,lime 等を追加

  • button-custom-pub.html :

CSS は、background ,border 色等の設定　、下記はindigo

https://gist.github.com/kuc-arc-f/fea053e0e96e9017467e80a55eaebdfd

.btnx-indigo{
    background: var(--bs-indigo); border: 2px solid var(--bs-indigo); 
}
  • HTML : 呼出し
button-custom-pub.html
<button class="btn btn-secondary btnx-indigo">Button</button>

薄い色ボタンの例

  • btn-light に、カスタムCSS追加
.btnx-indigo-light{
    color: var(--bs-indigo) ;background: #9FA8DA; border: 2px solid #9FA8DA; 
}
  • HTML : 呼出し、上記の btnx-indigo-lightを追記
button-custom-pub.html
<button class="btn btn-light btnx-indigo-light">Button</button>

outline / アウトラインボタン

https://gist.github.com/kuc-arc-f/b9f929c94c6c7361a70dbb335bc92df7

.btnx--outline-indigo{
 color: var(--bs-indigo); background:var(--bs-white); border: 2px solid #9FA8DA; 
}
  • HTML : 呼出し、outline
button-custom-3.html
<button class="btn btn-light btnx--outline-indigo">Button</button>

....

Discussion