ボタンの装飾を作るエレメント CSS。
Table of Contents
Basic
.button
がベースとなります
.button
によってサイズなどは設定されますが単体では完成しません
- 次項の Variants を併用してください
Variants
.is-plain
でプレーンタイプのボタン装飾を作ります
.is-outline
でアウトラインタイプのボタン装飾を作ります
.is-melt
で溶け込むタイプのボタン装飾を作ります
.is-{color}
を追加するとボタンに色が付きます
{color}
は primary
secondary
info
success
warning
danger
の 6 種類
plain
outline
melt
Shape
.is-round
で角を完全に丸くできます
.is-circle
で正円ボタンにします
.is-square
で正方形ボタンにします
Angle
.is-angle-right
で右に角アイコンを表示させます
.is-angle-left
で左に角アイコンを表示させます
.is-angle-up
で角アイコンを上向きにします
.is-angle-bottom
でで角アイコンを下向きにします
- 角アイコン分の余白が足りない場合は padding で設定します
Strong
Floating
.is-floating
でドロップシャドウを付与します
.is-plain
と併用します
- 影は Color の色を引き継ぎます
Disabled
[disabled]
または [aria-disabled="true"]
または .is-disabled
で非活性化します
- 非活性化すると
pointer-events: none;
が付与されホバー効果などが打ち消されます
- 非活性化した
.button
は専用の色味に変化します
Variables
上書きできる変数は以下の通りです。
Import
PostCSS で読み込む場合の各パスは以下となります。
v7 を再現する場合は legacy.css
を追加で読み込んでください。