アイコン付き CTA ボタン（矢印あり）
左にラベル、右に矢印を置いた 汎用 CTA ボタン です。 display:inline-flex と gap で文字と矢印の間隔を保ち、 border-radius:999px で角を完全に丸めた pill 型にしています。
解説
左にラベル、右に矢印を置いた汎用 CTA ボタンです。display:inline-flex と gap で文字と矢印の間隔を保ち、border-radius:999px で角を完全に丸めた pill 型にしています。ホバーすると背景色が変わると同時に、矢印を包む span が transform:translateX(6px) で右へ滑ります。動きには cubic-bezier を使い、軽く跳ねるような自然な動きを与えているのが特徴です。
使う場面
- 「詳細を見る」「資料ダウンロード」などの主要な誘導ボタン
- 記事末やセクション末の次への導線
- ヒーロー直下のメイン CTA
矢印は文字（→）なので画像を読み込まず軽量です。背景色は background、移動量は translateX の値で調整でき、ブランドに合わせやすい構造です。a 要素で作られているため href にリンク先を入れるだけで動作します。動きを抑えたい利用者向けに prefers-reduced-motion でスライドを無効化しておくと配慮が行き届きます。矢印は装飾なので、リンク文だけで意味が通る文言にしておきましょう。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
矢印のスライド量や速さは変えられますか
変えられます。移動量は span の translateX、速さは transition の秒数で調整します。背景色は cta-arrow の background を書き換えてください。
ボタンではなくリンクとして動きますか
はい。a 要素で作られているので href に遷移先を指定すれば通常のリンクとして機能します。