Bulmaのボタン Button [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webフォームのデザインでは、ボタンは欠かせない要素です。

ユーザーに何らかの動作を確定、またはキャンセルさせるためにはボタンが必須となります。

Bulmaには「送信」や「キャンセル」など、クリックすることでユーザーの操作を受け付けるボタンを描画するクラスが用意されています。

今回はボタンを表現するbuttonクラスについて紹介します。

様々な色、サイズ、状態のボタンを定義するbuttonクラス

Bulmaに用意されているbuttonクラスを利用すると、ボタンやリンクなどの要素をフラットなボタンとして表現(描画)できます。

Bulmaのbuttonクラスのブラウザーでの実行結果

HTML

上記のサンプルではbutton要素にbuttonクラスを指定していますが、button要素以外に指定することもできます。
buttonクラスは以下の要素に対応しています。

  • <a> アンカーリンク
  • <button> フォームボタン
  • <input type=”submit”> 入力を送信するボタン
  • <input type=”reset”> 入力をリセットボタン

HTML

ブラウザーで表示すると以下のようになります。

Bulmaのbuttonクラスのブラウザーでの実行結果

buttonクラスを指定すると、どの要素でも見た目は同じになります。

Bulmaのbuttonクラスを使用したボタンでは、様々な色やサイズを表現できます。
以下では、ボタンのオプションについて紹介します。

ボタンの色

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

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

HTML

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

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

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

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

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

HTML

ボタンのサイズ

ボタンのサイズには4種類が用意されています。

  • 小さいサイズ
  • 通常のサイズ
  • 中くらいのサイズ
  • 大きいサイズ

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

HTML

小さなサイズのボタンには、is-small
通常のサイズのボタンには、is-normal
中くらいのサイズのボタンには、is-medium
大きなサイズのボタンには、is-large
を指定します。
サイズを指定しない場合は、通常サイズ(is-normalと同じ)になります。

サイズの指定では、それぞれのボタンに指定する方法とは別に、まとめて指定する方法も用意されています。
複数のボタンのサイズをまとめて指定する場合は、ボタンの親となるラップ要素を配置し、buttonsクラスを指定します。

サイズには、「小」「中」「大」の3種類が指定できます。
小サイズのボタンをセットで設定するには、are-small
中サイズのボタンをセットで設定するには、are-medium
大サイズのボタンをセットで設定するには、are-large
を指定します。

Bulmaのbuttonクラスで様々なサイズをまとめて表現したサンプルのブラウザーでの実行結果

HTML

複数のボタンセットのサイズを変更した場合でも、一部のボタンのサイズを変更することができます。
他のボタンとは別のサイズを指定したいボタンにサイズを表すクラスを指定します。

以下の例では、buttons are-smallで複数のボタンに小さいサイズを設定し、一部のボタンを通常、中、大に指定します。

Bulmaのbuttonクラスで様々なサイズをまとめて表現し、一部のサイズを個別に指定したサンプルのブラウザーでの実行結果

HTML

フルサイズのボタン

横一杯に幅を広げたフルサイズのボタンを表示したい場合は、is-fullwidthクラスを指定します。

Bulmaのbuttonクラスで横幅一杯にサイズを指定したサンプルのブラウザーでの実行結果

HTML

ボタンのスタイル

Bulmaのbuttonクラスを指定したボタンでは、スタイルを持ったものを表現することができます。
スタイルには「アウトライン」と「反転」があります。

アウトライン

アウトラインスタイルを適用する場合は、is-outlinedクラスを指定します。

Bulmaのbuttonクラスでアウトライン表示したボタンのサンプルのブラウザーでの実行結果

HTML

is-outlinedクラスを指定したボタンは、背景色が白くなり枠線が設定されます。

反転

反転スタイルを適用する場合は、is-invertedクラスを指定します。

Bulmaのbuttonクラスで反転表示したボタンのサンプルのブラウザーでの実行結果

HTML

is-invertedクラスを指定したボタンは、反転するので枠線がなくなり背景色が白くなります。

アウトライン(is-outlinedクラス)と反転(is-invertedクラス)は両方同時に指定することもできます。
アウトラインと反転を指定したボタンは、ボタンの上にマウスカーソルがある場合(ホバー状態の時)だけ表示されます。

丸いボタン

Bulmaには丸いボタンを表現するクラスも用意されています。
ボタンの左右が半円形の丸いボタンを表現したい場合は、is-roundedクラスを指定します。

Bulmaのbuttonクラスでアウトライン表示したボタンのサンプルのブラウザーでの実行結果

HTML

状態を表すボタン

Bulmaのbuttonクラスを指定したボタンでは、様々な状態を表すこともできます。
状態には「ホバー」「フォーカス」「アクティブ」「ローディング(読み込み中)」「スタティック(静的)」「無効」があります。

ホバー

ホバー状態(:hover)を指定する場合は、is-hoveredクラスを指定します。

Bulmaのbuttonクラスでホバー状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

フォーカス

フォーカス状態(:focus)を指定する場合は、is-focusedクラスを指定します。

Bulmaのbuttonクラスでフォーカス状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

アクティブ

アクティブ状態(:active)を指定する場合は、is-activeクラスを指定します。

Bulmaのbuttonクラスでアクティブ状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

ローディング(読み込み中)

何らかの処理を行っている最中であることを表すローディングスピナー付きの読み込み中ボタンを表すクラスもBulmaのボタンには用意されています。
読み込み中ボタンは、is-loadingクラスを指定して表現します。

Bulmaのbuttonクラスで読み込み中のボタンを表現したサンプルのブラウザーでの実行結果

HTML

読み込み中ボタンを表現するis-loadingクラスは:: after疑似要素を使用して実装されているため、<input type = “submit”>要素ではサポートされていません。 代わりに<button type = “submit”>の使用を検討してください。

スタティック(静的)

静的状態のボタン(非対話型ボタン)を作成することで、フォームアドオンのテキストラベルとして使用することもできます。
静的ボタンを表現する際は、is-staticクラスを使用します。

Bulmaのbuttonクラスで静的な状態のテキストラベル用ボタンを表現したサンプルのブラウザーでの実行結果

HTML

スタティックボタンを利用したテキストラベルの使用例
スタティックボタン(静的ボタン)を利用してテキストラベルを配置する例を以下に示します。

HTML

ブラウザーでの表示結果

Bulmaのbuttonクラスで静的なテキストラベルを表現してinputクラスとselectクラスを組み合わせた実装サンプルをブラウザーで実行した結果

Bulmaのテキストボックス(入力欄) Input [CSSフレームワーク]
ユーザーの入力を受け付けるWebサイトやWebシステムでは、HTMLのフォームを配置します。 フォームに配置されるコントロール...
Bulmaのセレクトボックス Select [CSSフレームワーク]
WebサイトやWebシステムのフォームでは、ドロップダウンリストから項目を選択するselect要素が頻繁に使用されます。 Bu...

無効

ボタンが使用できなことを表すために無効な状態のボタンを作成することもできます。
無効状態のボタンを作成する場合は、クラスでの指定ではなくHTMLに用意されているdisabled属性を使用します。

Bulmaのbuttonクラスで無効状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

アイコン付きボタン

Bulmaのbuttonクラスで作成するボタンでは、Font Awesomeで提供されているアイコンを埋め込むこともできます。

Bulmaのbuttonクラスでアイコン付きのボタンを表現したサンプルのブラウザーでの実行結果

HTML

ボタンにテキストを表示する場合は、アイコンとは別のspan要素を配置します。

Font Awesomeのアイコンを利用する場合は、CDNを利用するなどして参照する必要があります。

フリーで使用できるFont Awesomeのアイコンは、以下の記事でご紹介しています。

Font Awesome アイコンフォント一覧 [Free (フリー) のみ]
Font Awesomeのアイコンフォントの一覧です。 Free(無償で利用可能)のアイコンのみをリストにまとめました。 F...

ボタンのグルーピング(グループ化)

fieldクラスを指定したコンテナ要素にis-groupedクラスを指定することで、ボタンをグルーピングすることができます。

HTML

Bulmaのbuttonクラスの実装サンプルをブラウザーで実行した結果

is-groupedクラスの代わりにhas-addonsクラスを指定することで、以下のように配置することもできます。

HTML

Bulmaのbuttonクラスの実装サンプルをブラウザーで実行した結果

has-addonsクラスを指定するとボタン同士が隣接します。

Bulmaのbuttonクラスを使用したボタンには、様々な表現方法が用意されていますので、作成するUI(ユーザーインターフェース)に合わせて適切なデザインを選ぶことができるようになっています。

Bulma 入門 Tips 一覧