ボタン

ボタン いいねボタンLike Button Animation

ハートを押すと、ぽんっとふくらんで縮み、周りに小さな粒が飛び散る。数字も下から入れ替わる。

ボタン スライドして確定Slide to Confirm

丸いつまみを右端まで指で滑らせると確定する。押し間違いが起きない、重い操作用のボタン。

ボタン セグメントボタンSegmented Button

2〜5個のボタンが1本につながっていて、選んだものだけが塗られる。「日・週・月」の切り替えなどに使う。

ボタン チップChips

小さな角丸のボタン。絞り込み・並び替えの選択、入力したタグの表示、すぐ実行できる提案などに使う。

ボタン トグルボタンToggle Buttons

太字・斜体・下線のように、つながったアイコンボタンを押すたびにオンとオフが切り替わる。

ボタン ボタンの種類Button Styles

塗り・トーナル・浮き・枠線・文字だけ、の5段階の目立ち方があり、操作の重要さに合わせて使い分ける。

ボタン ホバーで変わるHover Effect

PC でマウスを乗せると、カードが少し浮き上がって色が変わり、カーソルが指の形になる。押せることが伝わる。

ボタン ローディングボタンLoading Button

押すとボタンが丸く縮んで中でくるくる回り、終わるとチェックマークに変わる。二度押しも防げる。

ボタン 拡張FAB（文字付き FAB）Extended FAB

右下の丸いボタンに「メモを書く」のような文字が付いた横長版。スクロールで読み進めるとアイコンだけに縮む。

ボタン 波紋（インクリップル）Ink Ripple

押した場所から水面の波紋のように色が広がり、「押せた」ことを伝える Material の基本の反応。

ボタン 分割ボタンSplit Button

左側を押すといつもの操作、右側の▼を押すと別のやり方を選ぶメニューが出る、2つに割れたボタン。