矢印スライド CTA ボタン
ホバーすると矢印が 右へスーッと伸びる 、資料請求やサービス詳細でおなじみの定番 CTA です。矢印は span に入れた「→」で、 :hover 時に transform:translateX(6px) で右へ移動します。
解説
ホバーすると矢印が右へスーッと伸びる、資料請求やサービス詳細でおなじみの定番 CTA です。矢印は span に入れた「→」で、:hover 時に transform:translateX(6px) で右へ移動します。動きには cubic-bezier を使い、最後にわずかに行き過ぎてから戻るような弾むニュアンスを付けているのがポイントです。ボタン全体は inline-flex でラベルと矢印を横並びにし、border-radius:999px で角丸のピル形にしています。
効く場面
- 「資料ダウンロード」「詳しく見る」など次の行動を促す主要ボタン
- サービス紹介や事例ページへの導線
- LP のファーストビューに置くメイン CTA
移動量は translateX(6px) の値で、色はホバー時の background（このサンプルでは #667eea）で調整します。「→」は文字なので別のアイコンに差し替えても構いません。注意点として、矢印は飾りなのでラベルだけで意味が通る文言にし、矢印に頼りすぎないこと。動きを抑えたいユーザー向けに prefers-reduced-motion も考慮できます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
矢印の移動量や跳ね方を変えられますか
移動量は :hover 時の translateX(6px) の数値で変わります。跳ねる動きは transition の cubic-bezier の値で調整でき、最後の数値を大きくすると行き過ぎてから戻る弾みが強くなります。
矢印を別のアイコンに変えられますか
できます。サンプルの矢印は span 内の「→」という文字なので、別の記号やインライン SVG アイコンに置き換え可能です。その場合も同じ translateX の指定で動きます。