矢印スライドインボタン
矢印スライドインボタンは、ラベルの右に隠した矢印（ .as-ar ）を、ホバー時に幅と余白を広げながらフェードインさせる定番のマイクロインタラクションです。通常時は矢印が width:0 かつ opacity:0 で完全に隠れ、 overflow:hidden でボタン内に収まっています。
解説
矢印スライドインボタンは、ラベルの右に隠した矢印（.as-ar）を、ホバー時に幅と余白を広げながらフェードインさせる定番のマイクロインタラクションです。通常時は矢印が width:0 かつ opacity:0 で完全に隠れ、overflow:hidden でボタン内に収まっています。:hover で width:24px・margin-left:8px・opacity:1 に変わり、矢印がスッと現れて先へ進む気配を演出します。文字に「→」を使うシンプル構成で、JavaScript は不要です。
使いどころ
- 「続きを読む」「詳しく見る」などの誘導リンク
- 記事一覧やカードの末尾に置く CTA
- 次のステップへ進ませたいフォームのボタン
矢印の出方は width と margin の値、速さは transition の .3s で調整できます。テキストの「→」を別の記号やアイコンに差し替えることも可能です。ホバーで初めて矢印が見えるため、タッチ端末では現れにくい点に注意。重要な意味を矢印だけに持たせず、ラベル文言で要件が伝わるようにしておくと安全です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
矢印を別のアイコンに変えられますか
HTML 内の「→」をほかの記号やインライン SVG アイコンに差し替えれば変更できます。表示・非表示の動きは .as-ar の width と opacity で制御しているので、中身を変えてもスライドイン自体は同じように機能します。
スマホでは矢印が出ませんが問題ありませんか
この演出はホバー前提なので、タッチ端末では矢印が常に隠れたままになりがちです。意味は『続きを読む』などのラベルで伝わるよう設計されているため操作上の支障はありませんが、必要なら矢印を常時表示にする調整も可能です。