矢印がポップインする「もっと読む」ボタン

解説

このボタンは、ホバーすると右側から矢印がスッと現れ、文字が左へ少し移動する「もっと読む」風の導線です。矢印は普段 opacity: 0 と translate で右外に隠れていて、ホバー時に定位置へ戻りながら表示されます。同時にテキストが translateX(-12px) で左へずれるため、矢印が入るスペースが自然に空くという連動した動きです。本体に overflow: hidden を付けて、外に控えた矢印がはみ出さないようにしています。CSS のみで動作します。

使う場面

• ブログやメディアの記事カードにある「Read More」
• お知らせ一覧の「詳細を見る」リンク風ボタン
• サービス紹介セクションの「続きを読む」導線

矢印の出方は隠す位置の translate 量と transition の秒数で調整でき、文字のずれ幅は translateX の値で変えられます。固定幅でテキストを左寄せにしているので、文言が長い場合は幅の見直しが必要です。矢印を文字（→）で出しているため読み上げで意図しない読み方をされることがあり、装飾的な矢印は aria-hidden 扱いにし、ボタンの目的はテキストで伝えると安心です。

使用例・適したシーン

• お問い合わせフォームの送信ボタン
• 資料ダウンロードの CTA
• ヒーローセクションの主要 CTA
• サブスク・申込ボタン