下から塗りつぶしホバー
下から塗りつぶすホバーボタンは、 ::before 疑似要素を背面（ z-index:-1 ）に置き、通常時は height:0 で見えない状態にしておきます。 :hover で height:100% へ伸ばすと、色が下からせり上がってボタンを満たします。
解説
下から塗りつぶすホバーボタンは、::before 疑似要素を背面（z-index:-1）に置き、通常時は height:0 で見えない状態にしておきます。:hover で height:100% へ伸ばすと、色が下からせり上がってボタンを満たします。同時に文字色を反転させ、塗りが満ちたときに読みやすさを保ちます。overflow:hidden でボタン枠からはみ出した塗りを切り取り、cubic-bezier のイージングで満ちる動きに勢いを付けています。JavaScript は不要です。
活躍する場面
- 申込・資料請求などアクションを促す主要ボタン
- 白地に黒枠のシンプルなサイトのアクセント
- ホバーで「満ちる」演出を見せたいヒーローの CTA
満ちる方向は ::before の基準辺を変えれば調整でき、bottom:0 を top:0 にすれば上から落ちる表現になります。塗りの色 #1a1a2e と枠・文字色をセットで対比させるのがコツです。塗りが満ちた状態でも文字とのコントラストが十分か必ず確認し、アクセシビリティを損なわないようにしてください。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
塗りつぶす方向を変えられますか
::before の基準を bottom:0 から top:0 にすると上から、left:0 に変えて height を width に置き換えると横方向に満ちる表現になります。height のアニメーションを width に変える点だけ注意してください。
色はどこを変えればよいですか
枠線と文字の #1a1a2e、塗りに使う ::before の background が主な色です。塗りが満ちると文字色が反転して白になるので、塗り色と文字のコントラストが十分かを確認しながら変更してください。