ボタン・クリック演出
押したくなる、反応が気持ちいいボタン。
押した瞬間に返ってくる反応を集めたカテゴリ。リップルの波紋、いいねの粒子、コピー完了の文言切替のように「押せた」ことを目と文字で返す型と、スプリットボタンやボタングループのように複数の操作を1つの部品にまとめる型がある。原則はフィードバックの即時性。ボタンは押した直後に何かが変わらないと、利用者は二度押しするか、押せていないと思って離脱する。見た目を豪華にする前に、押下→反応の往復が100ms級で成立しているかを先に確かめる場面で引く。
使い分け反応を返すだけなら ripple-button / copy-feedback-button。視線を集める CTA は gradient-glow-button か fill-slide-button を1画面に1つ。主操作＋派生は split-button、対等な選択は button-group。glass-button / magnetic-button は背景が映える場所に限る。
まず見る3件
- クリック
リップル波紋ボタン解説あり
Ripple Effect
クリックした位置から波紋が広がる。Material Designでおなじみの「押した手応え」。
- 波紋は押した座標から出す。中央固定だと「押した場所が認識された」実感が薄く、指で隠れるモバイルで効かない
- 円の直径はボタンの長辺、拡大は 4 倍。どの端を押しても波紋が反対側の端まで届く最小の組み合わせ
- 動かすのは transform と opacity だけ。width／height を動かすとレイアウトが毎フレーム走る
- JS
- クリック
スプリットボタン
Split Button
主操作ボタンの右端に▼トグルが連結し、押すと別動作（名前を付けて保存など）のメニューが開く。外側クリック・Escで閉じる。
- 主操作と▼は別の button にする。1 つのボタンの右端だけ別動作にすると、キーボードでは派生操作に届かない
- 継ぎ目は inset の box-shadow 1 本だけ。border で引くと角丸の外枠と二重になり、連結して見えない
- ▼で ↓ を押したらメニューを開いて先頭項目へ、Esc で閉じて▼へ戻す。開閉のたびにフォーカスの行き先を決めておく
- JS
- クリック
ボタングループ
Button Group
複数ボタンを罫線を共有して連結したセグメント操作。上段は単一選択（左/中央/右揃え）、下段は複数トグル（太字/斜体/下線）の2パターンを見せる。
- 単一選択は radiogroup＋ローミング tabindex、複数トグルは aria-pressed と、見た目が同じでも役割で ARIA を分ける。読み上げで「3 つのうち 1 つ」か「オン／オフ」かが変わる
- 仕切りは先頭以外の左辺に 1px だけ引く。各ボタンに border を持たせると隣接部が 2px になり、外枠と太さが揃わない
- 選択面は藍の塗り＋白文字。枠線や下線だけの選択表示は、グループが小さいほど見落とす
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| リップル波紋ボタン Ripple Effect | クリック | JS | 送信など押した手応えを返したい主要ボタン・指で隠れるモバイルのタップ位置を伝えたい | default / active |
| マグネティックボタン Magnetic Button | ホバー | JS | LPの主要CTAに遊び心を足す・ポートフォリオ・ブランドサイト | default / hover |
| グラスモーフィズムボタン Glassmorphism Button | ホバー | CSSのみ | 写真・グラデーション背景の上に置くボタン・ヒーロー画像上のCTA | default / hover / active |
| 流れる光グラデボタン Glow Gradient Button | 自動再生 | CSSのみ | LPで視線を集めたい唯一のCTA・ダーク背景で発光させたいボタン | default |
| スライドフィルボタン Slide Fill Button | ホバー | CSSのみ | 線画（アウトライン）ボタンの二次的な操作・View More など控えめなCTA | default / hover / active |
| いいねバーストボタン Like Burst Button | クリック | JS | いいね・お気に入りのオン／オフ・SNSの反応ボタン | default / active |
| コピー完了フィードバック Copy-to-Clipboard Feedback | クリック | JS | コード・URL・IDのコピー・結果が画面に現れない操作の完了通知 | default / success |
| スプリットボタン Split Button | クリック | JS | 保存＋名前を付けて保存など主操作と派生操作・既定の動作を1クリック、別動作を選べる | default / hover / focus / active |
| ボタングループ Button Group | クリック | JS | 左／中央／右揃えなど排他の選択・太字／斜体など独立したオン／オフの並び | default / hover / focus / active |
すべての見本（9件）
- クリック
リップル波紋ボタン解説あり
Ripple Effect
クリックした位置から波紋が広がる。Material Designでおなじみの「押した手応え」。
- JS
- ホバー
マグネティックボタン
Magnetic Button
カーソルに吸い付くように動くボタン。近づくとぬるっと反応して、つい動かしたくなる。
- JS
- ホバー
グラスモーフィズムボタン
Glassmorphism Button
背景がすりガラス越しに透ける質感のボタン。カラフルな背景の上で映える。
- CSSのみ
- 自動再生
流れる光グラデボタン
Glow Gradient Button
グラデーションが流れ、背後がぼんやり発光するボタン。CTAで視線を集めたいときに。
- CSSのみ
- ホバー
スライドフィルボタン
Slide Fill Button
ホバーすると背景色が左から滑り込み、文字色が反転する。線画ボタンの定番演出。
- CSSのみ
- クリック
いいねバーストボタン
Like Burst Button
押すとハートが弾けて粒子が飛び散る。SNSでつい連打したくなるあの気持ちよさ。
- JS
- クリック
コピー完了フィードバック
Copy-to-Clipboard Feedback
クリックすると「✓ コピーしました」に変わって元に戻る。操作が伝わる安心感のある演出。
- JS
- クリック
スプリットボタン
Split Button
主操作ボタンの右端に▼トグルが連結し、押すと別動作（名前を付けて保存など）のメニューが開く。外側クリック・Escで閉じる。
- JS
- クリック
ボタングループ
Button Group
複数ボタンを罫線を共有して連結したセグメント操作。上段は単一選択（左/中央/右揃え）、下段は複数トグル（太字/斜体/下線）の2パターンを見せる。
- JS