いいねバーストボタン
押すとハートが弾けて粒子が飛び散る。SNSでつい連打したくなるあの気持ちよさ。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- いいね・お気に入りのオン／オフ
- SNSの反応ボタン
- 押した瞬間の気持ちよさを返したい小さな操作
- 避ける場面
- 取り消せない操作（トグルでない）
- 一覧に大量に並べて同時に弾けさせる
- reduced-motion 未対応で粒子を出す
- 構成要素
- ボタン
- ハートアイコン
- 粒子
- 持っている状態
- 通常
- 押下中
- キーボード
Tab でボタンへ・Enter／Space でオン／オフ（button 標準）
- 支援技術
aria-pressed を同期したトグル、aria-label=いいね、SVG は aria-hidden（APG Toggle Button）。塗りで状態を示す。reduced-motion では弾みと粒子を止め塗りだけ変える。focus-visible の輪郭あり
- 動き
ハートは 0.35s で 0.8→1.25→1 に弾み、粒子8個が 0.55s で 34〜44px 放射して消える。reduced-motion では無し
デザインの要点
- 粒子はオンにしたときだけ出す。オフ（取り消し）で弾けると、消したのか付けたのか分からない
- ハートは 0.8→1.25→1 と一度縮んでから膨らむ。縮みが無いと「膨らんだ」ではなく「大きくなった」に見える
- 粒子 8 個は等角に配置し距離だけ乱す。角度まで乱すと偏って、爆ぜたというより飛び散ったに見える
- 状態は塗り（fill）で持つ。粒子は消えるので、消えた後も「いいね済み」が分かる手がかりが要る
コード（コピーして使えます）
<button class="like-btn" aria-pressed="false" aria-label="いいね">
<svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true">
<path d="M12 21s-7-4.6-9.3-9.2C1.2 8.6 2.7 5.5 6 5.5c2 0 3.2 1.3 4 2.5.8-1.2 2-2.5 4-2.5 3.3 0 4.8 3.1 3.3 6.3C19 16.4 12 21 12 21z"/>
</svg>
</button>