ホバーしたときに、中心から波紋が広がっていくように背景色が反転するボタンの作り方

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

ホバーしたときに、中心から波紋が広がっていくように背景色が反転するボタンを作りたい
実際のWebサイト制作で使われそうなアニメーションつきボタンを作ってみたい

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

思わず何度もホバーしたくなるようなボタンの実装方法を解説します。

ホバーしたときに疑似要素beforeをtransform:scaleを使い、0から一気に拡大させることで、ボタンの中心から波紋が広がるようにして背景色が反転するボタンを作ります。

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

ボタンの素敵なホバーアニメーションをお探しの方のお役に立てれば幸いです。

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

ボタンのサンプル

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

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

見ていて心地が良いアニメーションですね。

See the Pen
ボタンホバーエフェクト素敵 by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

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

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

HTML

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

CSS

今回のCSSはこちらです。

特徴は、

ボタンにホバーしたときに、疑似要素のサイズを0から4.2へ拡大する（この数値はよしなに調整）
ボタンにoverflow:hiddenを指定して、疑似要素のはみ出る部分を隠す
アニメーション速度はtransitionで調整する

となります。

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

CSS

.Btn{
  border: 1px solid #5bc8ac;
  margin: 0 auto;
  position: relative;
  width: 240px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.05em;
  background: #5bc8ac;
  font-size: 12px;
  transition: initial;
  overflow: hidden;
  text-decoration: none;
}
.Btn-Text{
  color: #fff;
  font-weight: bold;
  z-index: 1000;
  transition: 0.6s ease all;
}
.Btn:hover .Btn-Text{
  color: #5bc8ac;
  transition: 0.6s ease all;
}
.Btn:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  margin: auto;
  width: 60px;
  height: 60px;
  background: #fff;
  transform: scale(0);
  transition: 0.6s ease all;
}
.Btn:hover:before{
  transform: scale(4.2);
}

まとめ

以上、ホバーしたときに、中心から波紋が広がっていくように背景色が反転するボタンの作り方を紹介しました。

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

それではまた、次のコーディング記事でお会いしましょう。

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

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