矢印スライドボタン（v2）
矢印スライドボタンは、ホバーすると ラベルと矢印の間隔が広がり、矢印が少し前へ滑る 動きで「進む・見る」を表現するボタンです。このサンプルは display:inline-flex でラベルと矢印を横並びにし、両者の間隔を gap で管理しています。
解説
矢印スライドボタンは、ホバーするとラベルと矢印の間隔が広がり、矢印が少し前へ滑る動きで「進む・見る」を表現するボタンです。このサンプルは display:inline-flex でラベルと矢印を横並びにし、両者の間隔を gap で管理しています。ホバー時に gap を 10px から 18px へ広げる（transition:gap .25s）と同時に、矢印 span.bas__arrow を transform:translateX(4px) で右へずらして、軽い前進感を出しています。JavaScript は不要で、角丸（border-radius:9999px）のピル形状が今風です。
使う場面
- 「詳しく見る」「次へ」など遷移をうながすボタン
- ヒーローや記事末尾の主要なコールトゥアクション
- カード内の控えめなリンクボタン
色は背景（#1a1a2e）と文字色を差し替えるだけでブランドに馴染みます。矢印は文字（→）で置いているので、SVGアイコンに差し替えても同じ仕組みが使えます。注意点として、transform と gap の両方を動かすと過剰に見えることがあるため、どちらか一方に絞ると上品です。動きを嫌うユーザー向けに prefers-reduced-motion でアニメーションを無効化しておくと安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
矢印を画像やアイコンに変えられますか
変えられます。サンプルは矢印を文字で置いていますが、bas__arrowの中身をインラインSVGや別のアイコンに差し替えても、ホバー時のtranslateXによる前進アニメーションはそのまま機能します。
ホバーできないスマホでも問題ありませんか
問題ありません。ホバー演出がないだけで、ボタン自体はそのまま表示・タップできます。動きはあくまで装飾なので、機能や可読性には影響しません。