ゴーストボタン（枠線フィル）

解説

普段は枠線だけの控えめなボタンで、カーソルを乗せると塗りつぶしの色が左から右へ流れ込むゴーストボタンです。塗りは ::before で作った疑似要素で、初期状態は transform:scaleX(0) で横幅ゼロに畳まれています。ホバーで scaleX(1) に広げ、transform-origin を右から左へ切り替えることで、塗りが滑らかに走る動きを生んでいます。

主役の塗りボタンと並べる二次的な行動、たとえば「お問い合わせ」「資料請求」「もっと見る」などに向いています。主張を抑えつつ、ホバーで存在感が立ち上がるため、画面のバランスを崩しません。

調整と配慮

• 枠線と塗りの色は border と ::before の background で変えられます。
• 塗りが走る速さは transition の秒数で調整します。
• 文字色はホバー時に color:#fff へ変わるため、塗り色とのコントラストを十分に確保すると読みやすくなります。

使用例・適したシーン

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