Amazon Music Unlimited 3か月99円で音楽聴き放題

Bootstrap 4 のボタンのサイズ、色をカスタマイズする方法

ボタンの大きさをカスタマイズ

割合で指定する

親要素に占める割合で指定するクラスが用意されています。


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のボタンを作る場合はこのようなクラスを用意します。

style.css
.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された時の枠線の色」とは、こちらの画像のことです。

それではカスタムしてピンク色のボタンを作成してみます。
変更箇所は赤字の部分です。

style.css
/* 通常のボタン色 */
.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;
}
.html
<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ファイルをいじっていく必要がありますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です