スタイルを変更したボタンを作成する [CSSフレームワーク Bulma]

Bulma ロゴ トップ バナー

Bulmaのボタンクラスを使用するとWebページに簡単にボタンを配置することができます。

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

以前の記事では、ボタンのカラーを指定する方法をご紹介しました。

様々な色のカラーボタンを作成する [CSSフレームワーク Bulma]
本ブログでは、以前にBulmaのbuttonクラスを使用することで、簡単にフラットなスタイルのボタンを配置することができることをご紹...

Bulmaのbuttonクラスで作成するボタンでは、カラーの他にスタイルを指定することができます。
そこで今回は、ボタンのスタイルを指定する方法について紹介します。

クラスを指定してボタンのスタイルを作成する

Bulmaのbuttonクラスを指定したボタンでは、スタイルを持ったものを表現することができます。

ボタンのスタイル

スタイルには「アウトライン」と「反転」があります。
ボタンのスタイルを設定する場合は、Bulmaに用意されているスタイルを表すクラスをボタン要素に指定します。

アウトライン

アウトラインスタイルを適用する場合は、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スタイル指定ボタン作成例のブラウザーでの表示

HTML

上記の例では、モーダルダイアログボックスなどによく配置されているOKボタンとキャンセルボタンを作成しています。
ボタンのスタイルにis-roundedクラスを指定して、丸いボタンに設定しています。
OKボタンは通常のスタイルにしていますが、キャンセルボタンにはis-outlinedクラスを指定してアウトラインスタイルを設定しています。
このようにスタイルを変更することで、ボタンの動作がまったく異なるものであることを明示しています。

Bulma 入門 Tips 一覧