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

Advertising

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

INDEX

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

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

bs-button.scss

[code]
.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;
}
}
[/code]

variables.scss

[code]
// 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;
[/code]

まとめ

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

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

Please share it!

URLをコピーしました！

URLをコピーしました！

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

目次

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

bs-button.scss

variables.scss

まとめ

関連記事