こんにちは。
ゆうや(@yuyaphotograph)です!
この記事では、
- ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方が知りたい
- 実際のWebサイト制作で使われそうなアニメーションつきボタンを作ってみたい
という方のお悩みを解決します!
少しだけ、こじゃれたボタンの実装方法を解説します。
疑似要素beforeを駆使して、ホバーしたときに左から右へスライドして背景色と文字色が反転するボタンを作ります。
動きの肝は、ボタンと全く同じサイズの疑似要素を最初は横幅を0にしておき、ホバーしたときに100%へ変更するといったものです。
仕組みを知ってしまえばなんてことはないアニメーションとなります。
ボタンのホバーアニメーションで躓いている方のお役に立てれば幸いです。
ボタンのサンプル
こちらCodePenで作ったアニメーションつきのボタンとなります。
実際にホバーしてみて、確かめてみてください。
HTML
ボタンのHTMLは至ってシンプル。
aタグの中にspanタグを入れ子にするだけ。
HTML
CSS
今回のCSSはこちらです。
特徴は、
- spanタグにホバーしたときに、疑似要素の横幅を0から100%へ変更する
- アニメーション速度はtransitionで調整する
となります。
ボタン色、文字サイズ、アニメーション速度などはよしなに変更して使ってください。
CSS
まとめ
以上、ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方を紹介しました。
洗練されたイメージのWebデザインで使われがちなアニメーションなので、もし遭遇した場合はぜひ、この記事の内容を試してみてください。

コーディングスキルアップシリーズはこちら!