Update!

SCSS: Bootstrap4 ボタンスタイルのテンプレート

Bootstrap でよく利用するオブジェクトの一つがボタンだと思います。
Bootstrap ボタンには通常時と hover 時の色が細かく指定されていますが、今回は hover 時の色変更を opacity での透明度で表現し、色変えを行いやすいサンプルコードをメモしておきます。

目次

  • Bootstrap4 ボタンスタイルのテンプレート
  • まとめ

Bootstrap4 ボタンスタイルのテンプレート

各色を変数化し、また、a タグで href がない場合でも、ボタンとして表示されるようにコードを変更しています。(※各ボタンのカラーは Bootstrap のデフォルトカラーを記述しています)

bs-button.scss

.btn-primary,
a.btn-primary:not([href]) {
    cursor: pointer;
    color: $btn-primary-color;
    background-color: $btn-primary-bg-color;
    border-color: $btn-primary-border-color;

    &:link {
        color: $btn-primary-color;
        background-color: $btn-primary-bg-color;
        border-color: $btn-primary-border-color;
    }

    &:visited {
        color: $btn-primary-color;
        background-color: $btn-primary-bg-color;
        border-color: $btn-primary-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-primary-color;
        background-color: $btn-primary-bg-color;
        border-color: $btn-primary-border-color;
    }

    &:active {
        color: $btn-primary-color;
        background-color: $btn-primary-bg-color;
        border-color: $btn-primary-border-color;
    }
}

.btn-secondary,
a.btn-secondary:not([href]) {
    cursor: pointer;
    color: $btn-secondary-color;
    background-color: $btn-secondary-bg-color;
    border-color: $btn-secondary-border-color;

    &:link {
        color: $btn-secondary-color;
        background-color: $btn-secondary-bg-color;
        border-color: $btn-secondary-border-color;
    }

    &:visited {
        color: $btn-secondary-color;
        background-color: $btn-secondary-bg-olor;
        border-color: $btn-secondary-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-secondary-color;
        background-color: $btn-secondary-bg-color;
        border-color: $btn-secondary-border-color;
    }

    &:active {
        color: $btn-secondary-color;
        background-color: $btn-secondary-bg-color;
        border-color: $btn-secondary-border-color;
    }
}

.btn-success,
a.btn-success:not([href]) {
    cursor: pointer;
    color: $btn-success-color;
    background-color: $btn-success-bg-color;
    border-color: $btn-success-border-color;

    &:link {
        color: $btn-success-color;
        background-color: $btn-success-bg-color;
        border-color: $btn-success-border-color;
    }

    &:visited {
        color: $btn-success-color;
        background-color: $btn-success-bg-color;
        border-color: $btn-success-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-success-color;
        background-color: $btn-success-bg-color;
        border-color: $btn-success-border-color;
    }

    &:active {
        color: $btn-success-color;
        background-color: $btn-success-bg-color;
        border-color: $btn-success-border-color;
    }
}

.btn-danger,
a.btn-danger:not([href]) {
    cursor: pointer;
    color: $btn-danger-color;
    background-color: $btn-danger-bg-color;
    border-color: $btn-danger-border-color;

    &:link {
        color: $btn-danger-color;
        background-color: $btn-danger-bg-color;
        border-color: $btn-danger-border-color;
    }

    &:visited {
        color: $btn-danger-color;
        background-color: $btn-danger-bg-color;
        border-color: $btn-danger-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-danger-color;
        background-color: $btn-danger-bg-color;
        border-color: $btn-danger-border-color;
    }

    &:active {
        color: $btn-danger-color;
        background-color: $btn-danger-bg-color;
        border-color: $btn-danger-border-color;
    }
}

.btn-warning,
a.btn-warning:not([href]) {
    cursor: pointer;
    color: $btn-warning-color;
    background-color: $btn-warning-bg-color;
    border-color: $btn-warning-border-color;

    &:link {
        color: $btn-warning-color;
        background-color: $btn-warning-bg-color;
        border-color: $btn-warning-border-color;
    }

    &:visited {
        color: $btn-warning-color;
        background-color: $btn-warning-bg-color;
        border-color: $btn-warning-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-warning-color;
        background-color: $btn-warning-bg-color;
        border-color: $btn-warning-border-color;
    }

    &:active {
        color: $btn-warning-color;
        background-color: $btn-warning-bg-color;
        border-color: $btn-warning-cborder-olor;
    }
}

.btn-info,
a.btn-info:not([href]) {
    cursor: pointer;
    color: $btn-info-color;
    background-color: $btn-info-bg-color;
    border-color: $btn-info-border-color;

    &:link {
        color: $btn-info-color;
        background-color: $btn-info-bg-color;
        border-color: $btn-info-border-color;
    }

    &:visited {
        color: $btn-info-color;
        background-color: $btn-info-bg-color;
        border-color: $btn-info-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-info-color;
        background-color: $btn-info-bg-color;
        border-color: $btn-info-border-color;
    }

    &:active {
        color: $btn-info-color;
        background-color: $btn-info-bg-color;
        border-color: $btn-info-border-olor;
    }
}

.btn-light,
a.btn-light:not([href]) {
    cursor: pointer;
    color: $btn-light-color;
    background-color: $btn-light-bg-color;
    border-color: $btn-light-border-color;

    &:link {
        color: $btn-light-color;
        background-color: $btn-light-bg-color;
        border-color: $btn-light-border-color;
    }

    &:visited {
        color: $btn-light-color;
        background-color: $btn-light-bg-color;
        border-color: $btn-light-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-light-color;
        background-color: $btn-light-bg-color;
        border-color: $btn-light-border-color;
    }

    &:active {
        color: $btn-light-color;
        background-color: $btn-light-bg-color;
        border-color: $btn-light-border-color;
    }
}

.btn-dark,
a.btn-dark:not([href]) {
    cursor: pointer;
    color: $btn-dark-color;
    background-color: $btn-dark-bg-color;
    border-color: $btn-dark-border-color;

    &:link {
        color: $btn-dark-color;
        background-color: $btn-dark-bg-color;
        border-color: $btn-dark-border-color;
    }

    &:visited {
        color: $btn-dark-color;
        background-color: $btn-dark-bg-color;
        border-color: $btn-dark-border-color;
    }

    &:hover {
        opacity: 0.9;
        text-decoration: none;
        color: $btn-dark-color;
        background-color: $btn-dark-bg-color;
        border-color: $btn-dark-border-color;
    }

    &:active {
        color: $btn-dark-color;
        background-color: $btn-dark-bg-color;
        border-color: $btn-dark-border-color;
    }
}

variables.scss

// button
$btn-primary-color: #ffffff;
$btn-primary-bg-color: #007bff;
$btn-primary-border-color: #007bff;

$btn-secondary-color: #ffffff;
$btn-secondary-bg-color: #6c757d;
$btn-secondary-border-color: #6c757d;

$btn-success-color: #ffffff;
$btn-success-bg-color: #28a745;
$btn-success-boder-color: #28a745;

$btn-danger-color: #ffffff;
$btn-danger-bg-color: #dc3545;
$btn-danger-border-color: #dc3545;

$btn-warning-color: #ffffff;
$btn-warning-bg-color: #ffc107;
$btn-warning-border-color: #ffc107;

$btn-info-color: #ffffff;
$btn-info-bg-color: #17a2b8;
$btn-info-border-color: #17a2b8;

$btn-light-color: #ffffff;
$btn-light-bg-color: #f8f9fa;
$btn-light-boder-color: #f8f9fa;

$btn-dark-color: #ffffff;
$btn-dark-bg-color: #343a40;
$btn-dark-boder-color: #343a40;

まとめ

Bootstrap のボタンの色を変更するだけでも Web 全体の雰囲気が変わってきます。
最初に色を決めてしまえば後々悩む心配はなくなるので、多少イニシャルコストをかけても色スタイルは工夫するよう心がけましょう。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents