ぺらラボ 
この記事はボタンのカスタマイズについて書いています。
ボタン関係の装飾まとめは下記記事を参照してください。
世界最大級のオンライン学習『Udemy』でBootstrap4を効率よく学ぶ
ボタンの大きさをカスタマイズ
割合で指定する
親要素に占める割合で指定するクラスが用意されています。
幅
w-25, w-50, w-75, w-100, w-auto
高さ
h-25, h-50, h-75, h-100, h-auto
スタイルはこのようになっています。
.w-25 {
width: 25% !important;
}
.w-auto {
width: auto !important;
}
.h-50 {
height: 50% !important;
}
.h-75 {
height: 75% !important;
}width, heightに対してパーセンテージで占める割合を指定していますね。
サンプル
<button type="button" class="btn btn-primary w-25">w-25</button><br>
<button type="button" class="btn btn-primary w-50 mt-2">w-50</button><br>
<button type="button" class="btn btn-primary w-75 mt-2">w-75</button><br>
<button type="button" class="btn btn-primary w-100 mt-2">w-100</button><br>
<button type="button" class="btn btn-primary w-auto mt-2">w-auto</button>
ボタンはインライン要素なので、w-autoを指定した場合はコンテンツ（文字列）の幅になっています。
ピクセルで指定する
Bootstrapの命名規則に則ってクラスを自作します。
例えば幅150pxのボタンを作る場合はこのようなクラスを用意します。
.w-150px {
width: 150px !important;
}ボタンに指定します。
<button type="button" class="btn btn-primary w-150px">w-150px</button>
クラスを用意せずにインライン指定するやり方もあります。
<button type="button" class="btn btn-primary" style="width:150px">w-150px</button>パディングを消す
ボタンにはpaddingが設定されているので、コンテンツ（文字列）をボタンいっぱいにピッチリ表示したい場合、paddingが邪魔になります。
Bootstrap4にはpadding調整用のクラスが用意されているので、それを使ってpaddingを消します。
p-0 上下左右のpaddingを0にします。
py-0 上下のpaddingを0にします。
pt-0 上のpaddingを0にします。
pb-0 下のpaddingを0にします。
px-0 左右のpaddingを0にします。
pr-0 右のpaddingを0にします。
pl-0 左のpaddingを0にします。
スタイルはこのようになっています。
.p-0 {
padding: 0 !important;
}
.pt-0,
.py-0 {
padding-top: 0 !important;
}
.pr-0,
.px-0 {
padding-right: 0 !important;
}
.pb-0,
.py-0 {
padding-bottom: 0 !important;
}
.pl-0,
.px-0 {
padding-left: 0 !important;
}これら以外にも、ブレイクポイントを指定したpaddingクラスも用意されています。
p-(添字)-0
添字は sm, md, lg, xl が用意されています。（最も小さい xs の添字指定はありません。）
例）px-md-0 md以上の画面サイズの時は左右のpaddingを0にする。
左右のパディングを0にして、幅150pxと、ピッチリにした幅60pxのボタンを作るとこうなります。
<p class="mb-0">パディングなし</p>
<button type="button" class="btn btn-primary w-150px px-0">幅150px</button>
<p class="mt-3 mb-0">パディングあり</p>
<button type="button" class="btn btn-primary w-150px">幅150px</button>
<p class="mt-3 mb-0">パディングなし</p>
<button type="button" class="btn btn-primary w-60px px-0">幅60px</button>
<p class="mt-3 mb-0">パディングあり</p>
<button type="button" class="btn btn-primary w-60px">幅60px</button>
ボタンの色をカスタム
CSSによるカスタム
ボタンのカスタムをするにあたって、btn-primaryがどのようなスタイルになっているか見てみます。
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary:focus, .btn-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
.btn-primary.disabled, .btn-primary:disabled {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #0062cc;
border-color: #005cbf;
}
.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, 123, 255, 0.5);
}通常のボタンの色設定だけでなく、hover, focusされた時、disabledやactiveの状態、その上でさらにfocusされた時…など意外と設定箇所が多いです。
同じ属性値になっている箇所もあるので、まとめてみます。
/* 通常のボタン色 */
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
/* focusされた時の枠線の色 */
.btn-primary:focus, .btn-primary.focus,
.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, 123, 255, 0.5);
}
/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #0062cc;
border-color: #005cbf;
}6個だった塊が4個になりました。
これをベースに変更していくのが楽そうです。
「focusされた時の枠線の色」とは、こちらの画像のことです。
それではカスタムしてピンク色のボタンを作成してみます。
変更箇所は赤字の部分です。
/* 通常のボタン色 */
.btn-pink,
.btn-pink.disabled, .btn-pink:disabled {
color: #fff;
background-color: #ff7bff;
border-color: #ff7bff;
}
/* focusされた時の枠線の色 */
.btn-pink:focus, .btn-pink.focus,
.btn-pink:not(:disabled):not(.disabled):active:focus, .btn-pink:not(:disabled):not(.disabled).active:focus,
.show > .btn-pink.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(200, 123, 255, 0.5);
}
/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.btn-pink:hover {
color: #fff;
background-color: #ff69d9;
border-color: #ff62cc;
}
/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-pink:not(:disabled):not(.disabled):active, .btn-pink:not(:disabled):not(.disabled).active,
.show > .btn-pink.dropdown-toggle {
color: #fff;
background-color: #ee62cc;
border-color: #ee5cbf;
}<button type="button" class="btn btn-pink mt-1">通常ボタン</button>
<button type="button" class="btn btn-pink active mt-1">activeクラス適用</button>
<button type="button" class="btn btn-pink disabled mt-1">disabledクラス適用</button>
<button type="button" class="btn btn-pink mt-1" disabled>disabled属性適用</button>ボタンの色カスタムは変更箇所がそれなりにあるので、HTMLにインラインでstyle指定するのとは相性がよくありません。
今回のように、ちゃんとクラスを作成していく方が思わぬトラブルを防げます。
同様にoutlineのボタンカスタムの基本スタイルは下記の通りです。
必要に応じてクラス名やカラーコードを変えるのも一緒です。
.btn-outline-primary {
color: #007bff;
background-color: transparent;
background-image: none;
border-color: #007bff;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-primary:focus, .btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
color: #007bff;
background-color: transparent;
}Sassによるボタン色カスタマイズ
_buttons.scssでボタンは定義されています。
単純なカラーの追加であれば、$theme-colorsに色を設定するのが簡単です。
変更箇所はbootstrap.scssです。
$theme-colors: (
"cpink": #ff7bff
);
@import "functions";
@import "variables";
@import "mixins";
・
・variablesをimportするよりも先に、$theme-colors変数を配列で定義し、追加する色を設定します。
_variables.scss内で、Bootstrap4の標準カラーテーマとマージされるので、これだけで新規のカラーボタンが追加されました。（上記例だと .btn-cpink が新たに使えるようになります。）
focus時の色などは全て計算で出してくれます。ボタンの上のテキストの色も、コントラストを考慮して黒字か白字かが自動的に決定されます。
逆に言えば、任意で文字色を決めたり、focus、activeカラーなど細かく指定していきたいなら、もっと深くSassファイルをいじっていく必要がありますね。
お陰様でクリックされた時のデフォルトの色を変えることが出来ました。
有益な情報、大変感謝いたします。