アウトライン → 塗りつぶしボタン
通常は枠線だけのアウトライン表示で、ホバーすると背景色が 左から右へスライドして塗りつぶされる 二段階のボタンです。塗りつぶしは ::before 疑似要素を使い、最初は translateX(-101%) でボタンの左外に隠しておき、 :hover で translateX(0) に戻すことで内側に滑り込ませてい…
解説
通常は枠線だけのアウトライン表示で、ホバーすると背景色が左から右へスライドして塗りつぶされる二段階のボタンです。塗りつぶしは ::before 疑似要素を使い、最初は translateX(-101%) でボタンの左外に隠しておき、:hover で translateX(0) に戻すことで内側に滑り込ませています。文字は span に z-index を与えて塗りの上に保ち、文字色も transition で白へ滑らかに切り替わります。
こんな用途に
- ミニマルで主張しすぎない、上品な CTA ボタン
- 白背景の LP で、目を引きつつ落ち着かせたい申込ボタン
- セカンダリ（補助）ボタンとして枠線スタイルを使いたいとき
色を変えるときは、枠線・塗り・ホバー時の文字色の 3 か所を揃えて指定します。塗りの方向は ::before の初期 transform を変えれば、上から・下からにもアレンジできます。注意点として、塗りのアニメーションは cubic-bezier で勢いを付けているため、prefers-reduced-motion を尊重して動きを控える配慮があると親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
塗りつぶしの色を変えるにはどこを直しますか
枠線の border、::before の background、ホバー時の文字色 color の3か所を同系統に揃えて変更します。3つがずれると塗った瞬間に文字が読めなくなるので注意してください。
塗りつぶしの方向を変えられますか
変えられます。::before の初期 transform を translateX から translateY に変えれば上下方向、scaleX を使えば中央から広がる塗り方にもアレンジできます。