ダウンロード

ここをクリック

機能

Sass ツール

カスタマイズ

CSS ライブラリ

CSSヘルパー

スポンサー

Password.link

ボタン

従来のボタンは色、サイズ、状態に違いがあります

ボタンはどんなデザインでも欠かせない要素です。ページのインタラクティブ要素として、見栄え良く機能するように作られています。

例

HTML 

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

buttonクラスは以下に使用できます。

  • <a>アンカーリンク
  • <button>フォームボタン
  • <input type="submit">提出用インプット
  • <input type="reset">リセット用インプット

例

アンカー

HTML 

<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input" />
<input class="button" type="reset" value="Reset input" />

色 #

ボタンは$colors Sassマップで定義されているさまざまな色で使用できます。

例

HTML 

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

例

HTML 

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
</div>

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

各色には薄いバージョンもあります。ボタンの薄いバージョンを適用するには、単にカラーモディファイヤーにモディファイヤーis-lightを追加します。

例

HTML 

<div class="buttons">
  <button class="button is-primary is-light">Primary</button>
  <button class="button is-link is-light">Link</button>
</div>

<div class="buttons">
  <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>
</div>

暗いバージョンもあります。モディファイヤーis-darkを単に追加します。

例

HTML 

<div class="buttons">
  <button class="button is-primary is-dark">Primary</button>
  <button class="button is-link is-dark">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-dark">Info</button>
  <button class="button is-success is-dark">Success</button>
  <button class="button is-warning is-dark">Warning</button>
  <button class="button is-danger is-dark">Danger</button>
</div>

サイズ #

ボタンには4つの異なるサイズがあります:

  • 小
  • 標準
  • 中
  • 大

既定のサイズは標準サイズですが、ボタンを標準サイズにリセットする必要がある場合はis-normalモディファイヤーがあります。

例

HTML 

<button class="button is-small">Small</button>
<button class="button">Default</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>

親要素buttonsに包み込み、3つのモディファイヤーのいずれかを適用することで、複数のボタンのサイズを一度に変更できます。

  • buttons are-small
  • buttons are-medium
  • buttons are-large

例

HTML 

<div class="buttons are-medium">
  <button class="button">All</button>
  <button class="button">Medium</button>
  <button class="button">Size</button>
</div>

単にモディファイヤクラスを適用して、一部のボタンのみのサイズを変更できます。
たとえば、すべてのボタンを小にしたいが、標準サイズのボタンを1つだけ残したい場合は、以下のようにします。

例

HTML 

<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button is-normal">Normal</button>
  <button class="button">Small</button>
</div>

レスポンシブサイズ #

各ブレークポイントに異なるボタンサイズが必要な場合は、Bulmaのレスポンシブボタンを使用できます。単にis-responsiveモディファイヤーを追加します。

名前 固定サイズ レスポンシブサイズ (アクションを見るためにウィンドウのサイズを変更する) コード
既定 
<button class="button is-responsive">
  Default
</button>
小 
<button class="button is-small is-responsive">
  Small
</button>
標準 
<button class="button is-normal is-responsive">
  Normal
</button>
中 
<button class="button is-medium is-responsive">
  Medium
</button>
大 
<button class="button is-large is-responsive">
  Large
</button>
新しいウィンドウでテーブルを開く

$button-responsive-sizes Sass変数を上書きしてサイズをカスタマイズできます。

表示 #

例

HTML 

<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>

スタイル #

アウトライン

例

HTML 

<button class="button is-link is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-danger is-outlined">Outlined</button>

反転(テキストの色が背景色になり、その逆になります)

<button class="button is-link is-inverted">Inverted</button>
<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>
<button class="button is-danger is-inverted">Inverted</button>

丸いボタン

<button class="button is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-info is-rounded">Rounded</button>
<button class="button is-success is-rounded">Rounded</button>
<button class="button is-danger is-rounded">Rounded</button>

状態 #

Bulmaはボタンのさまざまな状態にスタイルを付けます。各状態は擬似クラスとCSSクラスとして使用できます。

  • :hoverとis-hovered
  • :focusとis-focused
  • :activeとis-active

これにより、トリガーしなくても特定のスタイルを取得できます。

標準

例

HTML 

<button class="button">Normal</button>
<button class="button is-link">Normal</button>
<button class="button is-primary">Normal</button>
<button class="button is-info">Normal</button>
<button class="button is-success">Normal</button>
<button class="button is-warning">Normal</button>
<button class="button is-danger">Normal</button>

ホバー

例

HTML 

<button class="button is-hovered">Hover</button>
<button class="button is-link is-hovered">Hover</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-info is-hovered">Hover</button>
<button class="button is-success is-hovered">Hover</button>
<button class="button is-warning is-hovered">Hover</button>
<button class="button is-danger is-hovered">Hover</button>

フォーカス

例

HTML 

<button class="button is-focused">Focus</button>
<button class="button is-link is-focused">Focus</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-info is-focused">Focus</button>
<button class="button is-success is-focused">Focus</button>
<button class="button is-warning is-focused">Focus</button>
<button class="button is-danger is-focused">Focus</button>

アクティブ

例

HTML 

<button class="button is-active">Active</button>
<button class="button is-link is-active">Active</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-info is-active">Active</button>
<button class="button is-success is-active">Active</button>
<button class="button is-warning is-active">Active</button>
<button class="button is-danger is-active">Active</button>

ロード

is-loading 修飾子を追加することで、非常に簡単にボタンをその**ロード中**バージョンに変えることができます。内部のテキストを削除する必要すらなく、デフォルトの状態とロード中の状態でボタンの**元のサイズ**を維持できます。

ロードスピナーは ::after 疑似要素を使用して実装されているため、<input type="submit"> 要素ではサポートされていません。代わりに、<button type="submit"> を使用することを検討してください。

<button class="button is-loading">Loading</button>
<button class="button is-link is-loading">Loading</button>
<button class="button is-primary is-loading">Loading</button>
<button class="button is-info is-loading">Loading</button>
<button class="button is-success is-loading">Loading</button>
<button class="button is-warning is-loading">Loading</button>
<button class="button is-danger is-loading">Loading</button>

スタティック

is-static 修飾子を使用することで、**非対話的なボタン**を作成できます。これは、たとえば フォームアドオン を使用する場合、テキストラベルを入力と揃えるのに便利です。

スタティック 
<span class="button is-static">Static</span>

無効

Bulma では、ユーザーがボタンとやり取りできないようにする disabled ブール型 HTML 属性 の使用がサポートされています。

is-disabled CSS クラスは、disabled HTML 属性に置き換えられて推奨されなくなりました。 詳細はこちら

<button class="button" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>
  Disabled
</button>
<button class="button is-primary" title="Disabled button" disabled>
  Disabled
</button>
<button class="button is-info" title="Disabled button" disabled>
  Disabled
</button>
<button class="button is-success" title="Disabled button" disabled>
  Disabled
</button>
<button class="button is-warning" title="Disabled button" disabled>
  Disabled
</button>
<button class="button is-danger" title="Disabled button" disabled>
  Disabled
</button>

Font Awesome アイコンを使用する

Bulma ボタンは、**Font Awesome アイコン** を追加することで簡単に強化できます。最高の結果を得るには、内部のテキストを別の <span> 要素で囲みます。

例

HTML 

<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-bold"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-italic"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-underline"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-primary">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>@jgthms</span>
  </button>
  <button class="button is-success">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
    <span>Save</span>
  </button>
  <button class="button is-danger is-outlined">
    <span>Delete</span>
    <span class="icon is-small">
      <i class="fas fa-times"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
</p>

ボタンにアイコンのみが含まれる場合、Bulma はボタンのサイズ または アイコンのサイズに関係なく、ボタンが**正方形**のままになるようにします。

<p class="buttons">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-medium">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-large">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>

ボタンのグループ #

**単一行**にボタンを**グループ化**する場合は、field コンテナで is-grouped 修飾子を使用します。

例

HTML 

<div class="field is-grouped">
  <p class="control">
    <button class="button is-link">Save changes</button>
  </p>
  <p class="control">
    <button class="button">Cancel</button>
  </p>
  <p class="control">
    <button class="button is-danger">Delete post</button>
  </p>
</div>

ボタンのアドオン #

アドオンとして使用する場合は、field コンテナで has-addons 修飾子を使用します。

例

HTML 

<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </button>
  </p>
</div>

アドオン付きボタンのグループ #

アドオンをグループ化することもできます。

例

HTML 

<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-bold"></i>
      </span>
      <span>Bold</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-italic"></i>
      </span>
      <span>Italic</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-underline"></i>
      </span>
      <span>Underline</span>
    </button>
  </p>
</div>

<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </button>
  </p>
</div>

ボタンリスト #

buttons コンテナを使用することで、**ボタンのリスト** を作成できます。

<div class="buttons">
  <button class="button is-success">Save changes</button>
  <button class="button is-info">Save and continue</button>
  <button class="button is-danger">Cancel</button>
</div>

リストが**非常に長い**場合は、自動的に**複数行**に折り返され、すべてのボタンが**均等に間隔**が空きます。

<div class="buttons">
  <button class="button">One</button>
  <button class="button">Two</button>
  <button class="button">Three</button>
  <button class="button">Four</button>
  <button class="button">Five</button>
  <button class="button">Six</button>
  <button class="button">Seven</button>
  <button class="button">Eight</button>
  <button class="button">Nine</button>
  <button class="button">Ten</button>
  <button class="button">Eleven</button>
  <button class="button">Twelve</button>
  <button class="button">Thirteen</button>
  <button class="button">Fourteen</button>
  <button class="button">Fifteen</button>
  <button class="button">Sixteen</button>
  <button class="button">Seventeen</button>
  <button class="button">Eighteen</button>
  <button class="button">Nineteen</button>
  <button class="button">Twenty</button>
</div>

has-addons 修飾子を使用してボタンを**一緒に付ける** ことができます。

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

is-centered または is-right 修飾子を使用して**整列** を変更します。

<div class="buttons has-addons is-centered">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

<div class="buttons has-addons is-right">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

各ボタンの区別にはどのような修飾子クラスでも使用できます。選択したボタンを兄弟要素よりも上に置くように、is-selected修飾子も追加してください。

<div class="buttons has-addons">
  <button class="button is-success is-selected">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button is-info is-selected">Maybe</button>
  <button class="button">No</button>
</div>

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button is-danger is-selected">No</button>
</div>

フォームグループとボタンのリストの違い

この一連のボタンのスタイルはfield is-groupedまたは新しいbuttonsクラスのどちらでも実現できますが、いくつかの違いがあります

  • buttonsはマークアップが簡単です
  • buttonsはbutton要素しか含むことができません
  • field is-groupedはどのような種類のcontrol入力も含むことができます
  • field is-groupedは1行にすべてのコントロールを収めるように強制できます
  • field is-groupedを使用すると、コントロールの1つを展開できます

基本的には、ボタンのリストだけが必要な場合はbuttonsの使用をお勧めします。スタイルや要素についてより詳しく制御する必要がある場合は、フォームグループを使用してください。

SassおよびCSS変数 #

Sass変数
CSS変数
値
 
$button-weight
 
var(--bulma-button-weight)
 
var(--bulma-weight-medium)
 
$button-family
 
var(--bulma-button-family)
 
false
 
$button-border-color
 
var(--bulma-button-border-color)
 
var(--bulma-border)
 
$button-border-style
 
var(--bulma-button-border-style)
 
solid
 
$button-border-width
 
var(--bulma-button-border-width)
 
var(--bulma-control-border-width)
 
$button-padding-vertical
 
var(--bulma-button-padding-vertical)
 
0.5em
 
$button-padding-horizontal
 
var(--bulma-button-padding-horizontal)
 
1em
 
$button-focus-border-color
 
var(--bulma-button-focus-border-color)
 
var(--bulma-link-focus-border)
 
$button-focus-box-shadow-size
 
var(--bulma-button-focus-box-shadow-size)
 
0 0 0 0.125em
 
$button-focus-box-shadow-color
 
var(--bulma-button-focus-box-shadow-color)
 
hsla(
  var(--bulma-link-h),
  var(--bulma-link-s),
  var(--bulma-link-on-scheme-l),
  0.25
)
 
$button-active-color
 
var(--bulma-button-active-color)
 
var(--bulma-link-active)
 
$button-active-border-color
 
var(--bulma-button-active-border-color)
 
var(--bulma-link-active-border)
 
$button-text-color
 
var(--bulma-button-text-color)
 
var(--bulma-text)
 
$button-text-decoration
 
var(--bulma-button-text-decoration)
 
underline
 
$button-text-hover-background-color
 
var(--bulma-button-text-hover-background-color)
 
var(--bulma-background)
 
$button-text-hover-color
 
var(--bulma-button-text-hover-color)
 
var(--bulma-text-strong)
 
$button-ghost-background
 
var(--bulma-button-ghost-background)
 
none
 
$button-ghost-border-color
 
var(--bulma-button-ghost-border-color)
 
transparent
 
$button-ghost-color
 
var(--bulma-button-ghost-color)
 
var(--bulma-link-text)
 
$button-ghost-decoration
 
var(--bulma-button-ghost-decoration)
 
none
 
$button-ghost-hover-color
 
var(--bulma-button-ghost-hover-color)
 
var(--bulma-link)
 
$button-ghost-hover-decoration
 
var(--bulma-button-ghost-hover-decoration)
 
underline
 
$button-disabled-background-color
 
var(--bulma-button-disabled-background-color)
 
var(--bulma-scheme-main)
 
$button-disabled-border-color
 
var(--bulma-button-disabled-border-color)
 
var(--bulma-border)
 
$button-disabled-shadow
 
var(--bulma-button-disabled-shadow)
 
none
 
$button-disabled-opacity
 
var(--bulma-button-disabled-opacity)
 
0.5
 
$button-static-color
 
var(--bulma-button-static-color)
 
var(--bulma-text-weak)
 
$button-static-background-color
 
var(--bulma-button-static-background-color)
 
var(--bulma-scheme-main-ter)
 
$button-static-border-color
 
var(--bulma-button-static-border-color)
 
var(--bulma-border)
 
$button-responsive-sizes
 
var(--bulma-)
 
(
  "mobile": (
    "small": calc(var(--bulma-size-small) * 0.75),
    "normal": calc(var(--bulma-size-small) * 0.875),
    "medium": var(--bulma-size-small),
    "large": var(--bulma-size-normal),
  ),
  "tablet-only": (
    "small": calc(var(--bulma-size-small) * 0.875),
    "normal": var(--bulma-size-small),
    "medium": var(--bulma-size-normal),
    "large": var(--bulma-size-medium),
  ),
)

Bulmaをサポートする方法

一回限りの寄付

スポンサーを見る

毎月の寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#