ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方

2020/07/26

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方が知りたい
実際のWebサイト制作で使われそうなアニメーションつきボタンを作ってみたい

という方のお悩みを解決します！

少しだけ、こじゃれたボタンの実装方法を解説します。

疑似要素beforeを駆使して、ホバーしたときに左から右へスライドして背景色と文字色が反転するボタンを作ります。

動きの肝は、ボタンと全く同じサイズの疑似要素を最初は横幅を0にしておき、ホバーしたときに100%へ変更するといったものです。

仕組みを知ってしまえばなんてことはないアニメーションとなります。

ボタンのホバーアニメーションで躓いている方のお役に立てれば幸いです。

ボタンのサンプル
- HTML
- CSS
まとめ

ボタンのサンプル

こちらCodePenで作ったアニメーションつきのボタンとなります。

実際にホバーしてみて、確かめてみてください。

See the Pen
xxZedNd by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

ボタンのHTMLは至ってシンプル。

aタグの中にspanタグを入れ子にするだけ。

HTML

<a href="" class="Btn">
  <span class="Btn-Text">MORE</span>
</a>

CSS

今回のCSSはこちらです。

特徴は、

spanタグにホバーしたときに、疑似要素の横幅を0から100%へ変更する
アニメーション速度はtransitionで調整する

となります。

ボタン色、文字サイズ、アニメーション速度などはよしなに変更して使ってください。

CSS

a{
  display: block;
  text-decoration: none;
}

.Btn{
  position: relative;
  border: 1px solid #5bc8ac;
  margin-left: auto;
  margin-right: auto;
  width: 240px;
  height: 48px;
  line-height: 48px;
  display: flex;
  text-align: center;
  background: #fff;
  font-size: 20px;
}

.Btn-Text{
  width: 100%;
  height: 100%;
  color: #5bc8ac;
  z-index: 10;
}

.Btn-Text:before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  background: #5bc8ac;
  z-index: -1;
  transition: .2s;
}

.Btn-Text:hover{
  color: #fff;
}

.Btn-Text:hover:before{
  width: 100%;
}

まとめ

以上、ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方を紹介しました。

洗練されたイメージのWebデザインで使われがちなアニメーションなので、もし遭遇した場合はぜひ、この記事の内容を試してみてください。

ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】

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