Monthly Archives: September 2019

Update!

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

Bootstrap でよく利用するオブジェクトの一つがボタンだと思います。 Bootstrap ボタンには通常時と hover 時の色が細かく指定されていますが、今回は hover 時の色変更を opacity での透明度で表現し、色変えを行いやすいサンプルコードをメモしておきます。 目次 Bootstrap4 ボタンスタイルのテンプレート まとめ Bootstrap4 ボタンスタイルのテンプレート 各色を変数化し、また、a タグで href がない場合でも、ボタンとして表示されるようにコードを変更しています。(※各ボタンのカラーは Bootstrap のデフォルトカラーを記述しています) bs-button.scss variables.scss まとめ Bootstrap のボタンの色を変更するだけでも Web 全体の雰囲気が変わってきます。 最初に色を決めてしまえば後々悩む心配はなくなるので、多少イニシャルコストをかけても色スタイルは工夫するよう心がけましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。