Semantic UI Doc ( Elements - Button ) を読む

Semantic UI の Button のページを読んだ。ボタンのテーマは 11 個ある。

.ui.button でボタンを表示できる。このクラスはどの HTML 要素にも指定できるが、キーボードフォーカス可能なボタンにしたければ tabindex="0" を <button> に追加すること。また、.ui.primary.button のような Modifier クラスを指定することで、サイトの主要な色をボタンに反映して強調することもできる。

ボタンにマウスオーバーしたときに、非表示にしていたラベルをアニメーションさせながら表示することもできる。これも .ui.animated.button のようにボタンに対する Modifier クラスとして指定する。

最初からボタンのそばにラベルを表示しておくこともできる。.ui.labeled.button でボタンとラベルを包んで指定する。ボタンとラベルの位置関係は柔軟に変更できる、ラベルがボタンより前でも後でも良い（ CSS クラスの当て方は変更する必要あり）。

.ui.icon.button でアイコンだけのボタンをつくることもできる。

ボタンのスタイルとしては、.ui.button で背景ベタ塗りのボタン、Modifier クラスとして .ui.basic.button を追加することで枠線だけのゴーストボタン、また別の Modifier として .ui.inverted.button を追加することで色を反転したボタンを表示する（黒背景にボタンを置いても見えるように）。

ボタンはグループ化できる。.ui.buttons で包んだ複数のボタンは余白のない一体型のボタンとなる。この包み込むボタンの間に .or を入れれば、条件式ボタングループになる。

<!-- 条件式ボタン -->
<div class="ui buttons">
  <button class="ui button"> ... </button>
  <div class="or"></div> <!-- 通常 "or" と表示されるが、このテキストは data-text 属性 を使って変更できる -->
  <button class="ui positive button"> ... </button>
</div>

ボタンの状態を指定するクラスもあり、アクティブ状態、無効状態、読み込み中の状態を指定できる。

状態以外にもボタンのバリエーションはある。アイコン付きのソーシャルボタンであるとか、サイズ・色のバリエーション、on / off 切替可能なトグルボタン、左右の配置、円形ボタンなど。

他のコンテンツの上下にボタンをくっつけたりもできる。たとえばテーブルの下にボタンをくっつけたりなど。