様々な色のカラーボタンを作成する [CSSフレームワーク Bulma]

Bulma ロゴ トップ バナー

本ブログでは、以前にBulmaのbuttonクラスを使用することで、簡単にフラットなスタイルのボタンを配置することができることをご紹介しました。

CSSフレームワーク Bulmaのボタン Button
Webフォームのデザインでは、ボタンは欠かせない要素です。 ユーザーに何らかの動作を確定、またはキャンセルさせるためにはボタン...

本記事では、buttonクラスで作成したボタンに様々なカラーを指定する方法について紹介します。

カラークラスを指定してボタンの色を作成する

Bulmaでは様々なカラークラスがあらかじめ用意されており、HTML要素の色を簡単に指定することができます。
また、Bootstrapなどと同様にテーマに合わせたカラーが用意されています。
テーマごとのカラーを表すクラスを指定することで、テーマに沿った色を付けたボタンを配置できます。
テーマには

  • primary
  • link
  • info
  • success
  • warning
  • danger

があります。

ボタンの色

ボタンの色には、Bulmaの変数として定義されているカラーを使用することができます。

Bulmaのbuttonクラスで様々な色を表現したサンプルのブラウザーでの実行結果

HTML

上記の例では、ボタンを整列するためにblockクラスを使用しています。
blockクラスについては、以下の記事を参考にしてください。

CSSフレームワーク Bulmaのブロック Block
Webページをレイアウトしていると、適度なスペース(マージン)を確保した領域を配置したい場合があります。 Bulmaには、コン...

primarylinkinfosuccesswarningdangerの各テーマカラーは、ライトバージョン(明るい形式)で表示することもできます。

ライトバージョンのテーマカラー

Bulmaのbuttonクラスで様々な色をライトバージョンで表現したサンプルのブラウザーでの実行結果

ライトバージョンを適用する場合は、is-lightクラスを指定します。

HTML

ライトバージョンのカラーを指定することで、同じテーマでもボタンを配置する場所によって色を変更することができます。
例えば、ヘッダー部やフッター部には、is-lightクラスを指定したボタンを配置し、コンテンツ部(明細部)には、通常のテーマカラーのボタンを配置するなどです。
画面のイメージを1つのテーマで統一している場合などでは、通常のボタンとライトバージョンのボタンを用いることで色を分けることができます。

ボタンカラーの設定例

ここでは、Twitter、Fasebook、LINEのSNSボタンを作成します。

Bulmaカラーアイコンボタン作成例のブラウザーでの表示

HTML

SNSの種類を表すために、Font Awesomeのアイコンを利用しています。
Twitterのボタンには、is-infoクラスを指定して背景色を水色にしています。
Facebookのボタンには、is-linkクラスを指定して背景色を群青色にしています。
LINEのボタンには、is-successクラスを指定して背景色を緑色にしています。
それぞれのボタンのアイコンは見やすくするために、Font Awesomeのクラスのfa-2xを指定して少しアイコンを大きくしています。

buttonクラスでFont Awesomeのアイコンを設定する方法については、以下の記事にまとめていますので合わせてご確認ください。

ボタンにFont Awesomeのアイコンを表示(設定)する [CSSフレームワーク Bulma]
Bulmaのbuttonクラスで作成するボタンでは、Font Awesomeで提供されているアイコンを埋め込むこともできます。 ...

Bulma 入門 Tips 一覧