.button

Bulma CSSフレームワークを使って <button> や <input type="submit"> 等のボタンをスタイリングするには、button クラスを指定する。

<button class="button">Button</button>
<input class="button" type="button" value="Button">
<input class="button" type="submit">
<input class="button" type="reset">

<a> に button クラスを指定することで、ボタン化することもできる。

<a class="button">Link</a>

Link

.is-small

Bulma CSSフレームワークで小さいボタンを作成するには、button クラスと is-small クラスを指定する。

<button class="button is-small">Button</button>
<a class="button is-small">Link</a>
<input type="submit is-small" class="button">

Link

.is-medium

Bulma CSSフレームワークで中くらいのボタンを作成するには、button クラスと is-medium クラスを指定する。

<button class="button is-medium">Button</button>
<a class="button is-medium">Link</a>
<input type="submit is-medium" class="button">

Link

.is-large

Bulma CSSフレームワークで大きいボタンを作成するには、button クラスと is-large クラスを指定する。

<button class="button is-large">Button</button>
<a class="button is-large">Link</a>
<input type="submit" class="button is-large">

Link

.is-fullwidth

Bulma CSSフレームワークで横幅いっぱいのボタンを作成するには、button クラスと is-fullwidth クラスを指定する。

<button class="button is-fullwidth">Button</button>
<a class="button is-fullwidth">Link</a>
<input type="submit" class="button is-fullwidth">

Link

.is-white

Bulma CSSフレームワークで白いボタンを作成するには、button クラスと is-white クラスを指定する。

<button class="button is-white">Button</button>

.is-dark

Bulma CSSフレームワークで暗いボタンを作成するには、button クラスと is-dark クラスを指定する。

<button class="button is-dark">Button</button>

.is-black

Bulma CSSフレームワークで黒いボタンを作成するには、button クラスと is-black クラスを指定する。

<button class="button is-black">Buutton</button>

.is-text

Bulma CSSフレームワークでテキストのボタンを作成するには、button クラスと is-text クラスを指定する。

<button class="button is-text">Button</button>

.is-primary

Bulma CSSフレームワークで優先ボタンを作成するには、button クラスと is-primary クラスを指定する。

<button class="button is-primary">Button</button>

.is-link

<button class="button is-link">Button</button>

.is-info

Bulma CSSフレームワークで情報ボタンを作成するには、button クラスと is-info クラスを指定する。

<button class="button is-info">Button</button>

.is-success

Bulma CSSフレームワークで成功ボタンを作成するには、button クラスと is-success クラスを指定する。

<button class="button is-success">Button</button>

.is-warning

Bulma CSSフレームワークで警告ボタンを作成するには、button クラスと is-warning クラスを指定する。

<button class="button is-warning">Button</button>

.is-danger

Bulma CSSフレームワークで危険ボタンを作成するには、button クラスと is-danger クラスを指定する。

<button class="button is-danger">Button</button>

.is-light

Bulma CSSフレームワークで色の薄いボタンを作成するには、button クラスと is-light クラスを指定する。

<button class="button is-light">Button</button>
<button class="button is-primary is-light">Primary</button>
<button class="button is-link is-light">Link</button>
<button class="button is-info is-light">Info</button>
<button class="button is-success is-light">Success</button>
<button class="button is-warning is-light">Warning</button>
<button class="button is-danger is-light">Danger</button>

.is-outlined

Bulma CSSフレームワークでアウトライン（白抜き）のボタンを作成するには、button クラスと is-outlined クラスを指定する。

<button class="button is-outlined">Button</button>
<button class="button is-primary is-outlined">Primary</button>
<button class="button is-link is-outlined">Link</button>
<button class="button is-info is-outlined">Info</button>
<button class="button is-success is-outlined">Success</button>
<button class="button is-warning is-outlined">Warning</button>
<button class="button is-danger is-outlined">Danger</button>

.is-inverted

Bulma CSSフレームワークで反転ボタンを作成するには、button クラスと is-inverted クラスを指定する。

<button class="button is-inverted">Button</button>
<button class="button is-primary is-inverted">Primary</button>
<button class="button is-link is-inverted">Link</button>
<button class="button is-info is-inverted">Info</button>
<button class="button is-success is-inverted">Success</button>
<button class="button is-warning is-inverted">Warning</button>
<button class="button is-danger is-inverted">Danger</button>

.is-loading

Bulma CSSフレームワークでローディング（読み込み中）ボタンを作成するには、button クラスと is-loading クラスを指定する。

<button class="button is-loading">Button</button>

.is-rounded

Bulma CSSフレームワークで角が丸いボタンを作成するには、button クラスと is-rounded クラスを指定する。

<button class="button is-rounded">Button</button>

.is-static

Bulma CSSフレームワークで固定ボタンを作成するには、button クラスと is-static クラスを指定する。

<button class="button is-static">Button</button>

disabled

Bulma CSSフレームワークで無効なボタンを作成するには、disabled 属性を指定する。

<button class="button" disabled>Button</button>

.icon

Bulma CSSフレームワークでは、Font Awesome のアイコンを利用できる。

<button class="button is-success">
  <span class="icon">
    <i class="fas fa-check"></i>
  </span>
  <span>OK</span>
</button>

.has-text-centered

Bulma CSSフレームワークを使ってボタンを中央揃えにするには、has-text-centered クラスを指定する。

<div class="has-text-centered">
  <button class="button">Center</button>
</div>

.has-text-right

Bulma CSSフレームワークを使ってボタンを右寄せにするには、has-text-right クラスを指定する。

<div class="has-text-right">
  <button class="button">Right</button>
</div>