円が広がって X に変形（リップル型）
このボタンは 2 段構えのアニメーションが見どころです。クリックすると背景の円（ __bg ）が transform:scale でゼロから一気に広がってボタンを塗りつぶし、わずかに遅れて 3 本線が X 形 へ変形します。
解説
このボタンは 2 段構えのアニメーションが見どころです。クリックすると背景の円（__bg）が transform:scale でゼロから一気に広がってボタンを塗りつぶし、わずかに遅れて 3 本線が X 形へ変形します。transition-delay で線の動きを .15s 後ろにずらしているため、「色が広がってから形が変わる」という連続感のあるリップル演出になります。線色も #1a1a2e から白へ反転します。動作の出し入れは aria-pressed の切り替えだけで、overflow:hidden が円のはみ出しを丸く収めます。
映える配置
- ファーストビューに置く印象的なヒーローメニュー
- ブランド色を強く見せたいランディングページ
- クリックの手応えを演出したいキャンペーンサイト
広がる円の色（#667eea）はブランド色に置き換えるだけで雰囲気が変わります。演出が強いぶん多用は禁物で、ページ内で主役のメニューに絞るのがおすすめです。動きの大きさを抑えたいときは scale の値や delay を下げ、prefers-reduced-motion 環境では拡大演出を省く配慮を入れると安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
広がる円の色をブランドカラーにできますか？
はい。__bg の背景色 #667eea を変えるだけで、広がる円の色をブランドカラーに合わせられます。線が白へ反転するので、円の色は線とのコントラストが出る濃いめの色が見やすいです。
動きが派手すぎる場合はどう調整しますか？
円の拡大量（scale の値）を小さくする、または線の transition-delay を縮めると落ち着いた印象になります。動きに敏感なユーザー向けに prefers-reduced-motion で拡大演出を省くとさらに親切です。