MENU
  1. ホーム
  2. フロントエンド
  3. CSS
  4. 【CSS】ボタンから波紋が広がっていくエフェクトを実装する方法

【CSS】ボタンから波紋が広がっていくエフェクトを実装する方法

CSS

SNSボタンなどに使えそうな、ボタンから波紋が広がっていくエフェクトを実装してみたので、紹介していこうと思います。

以下が実際のエフェクト付きボタンです。

このボタンをベースに、ホバー時のみ波紋エフェクトをONにするカスタマイズ方法も紹介していきます！

HTMLとCSSのみで実装できるので、是非試してみてください。

目次

【コピペ用】ボタンから波紋が広がっていくエフェクトの実装コード

まずは、「コピペしてすぐに使いたい」という方のために、全体のコードを載せておきます。

index.htmlとstyle.cssを作成して、コードをそのままコピペしてください。

Twitterアイコンの画像は、Iconfinderから無料でダウンロードできます。

imgタグのsrc属性の値には、ダウンロードした画像のパスを記入してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pulse Button DEMO</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="pulse-btn">
    <img src="画像のパスを記入">
  </a>
</body>
</html>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background-color: #16161d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1da1f2;
  box-shadow: 0 0 20px #1da1f2;
  cursor: pointer;
}

.pulse-btn img {
  width: 60%;
}

.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #1da1f2;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}

.pulse-btn::after {
  animation-delay: 1s;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

以上のコードをコピペすると、波紋が広がるエフェクト付きのボタンが確認できるかと思います。

ここからはコードの解説をしていきますので、カスタマイズしたい方・コードを理解したい方は次に進んでください。

ボタンから波紋が広がっていくエフェクトの実装方法と解説

このボタンの実装には、

  • HTML
  • CSS

この2つを使用します。

それぞれの実装手順を見ていきましょう。

実装手順1. HTMLでボタン要素を作成

<a class="pulse-btn">
  <img src="画像のパスを記入">
</a>

まずはHTMLでボタンの要素を作成します。

ここではaタグにpulse-btnというクラスを付けました。クラス名は自由なので好きなようにしてください。

ボタンの中身は、imgタグでアイコンを設定しています。

Iconfinderで様々なアイコンを無料でダウンロードできるので、アイコンをお持ちでない方は探してみてください。

実装手順2. CSSでボタンの装飾とアニメーションを設定する

/* ボタンの装飾 */
.pulse-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1da1f2;
  box-shadow: 0 0 20px #1da1f2;
  cursor: pointer;
}

/* ボタンの中のアイコン画像 */
.pulse-btn img {
  width: 60%;
}

/* ボタンの波紋 */
.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #1da1f2;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}

.pulse-btn::after {
  animation-delay: 1s;
}

/* ボタンの波紋が広がっていくアニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

こちらがCSSコードの全体像です。少し長いので、

  • ボタン本体の装飾
  • 波紋部分の装飾
  • 波紋が広がるアニメーション

この3つに分けて解説していきますね。

CSSパート1. ボタン本体の装飾

/* ボタンの装飾 */
.pulse-btn {
  position: relative;
  display: flex; /* 上下左右中央揃えに */
  align-items: center;
  justify-content: center;
  width: 50px; /* ボタンの横幅 */
  height: 50px; /* ボタンの縦幅 */
  border-radius: 50%; /* 円形にする */
  background-color: #1da1f2; /* ボタンの背景色 */
  box-shadow: 0 0 20px #1da1f2; /* ボタンの影 */
  cursor: pointer; /* マウスカーソルをポインターにする */
}

/* ボタンの中のアイコン画像 */
.pulse-btn img {
  width: 60%;
}

まずはボタン本体部分から見ていきましょう。

ボタンにはdisplay: flexを指定し、align-items: center justify-content: centerで中の要素を上下左右中央寄せにします。

width とheightには、ボタンの大きさを指定してください。縦幅・横幅に同じ値を設定し、その上にborder-radius: 50%を指定すると、きれいな円形になります。

background-color とbox-shadowにはそれぞれ背景色と影の色を指定できるので、好きな色を設定してください。

cursor: pointerでカーソルをポインターの形にしておくことで、ユーザにクリックできる要素であることを示せます。

最後に、ボタンの中に入るアイコン画像がボタンからはみ出ないように、widthを調整してください。

CSSパート2. 波紋部分の装飾

/* ボタンの波紋 */
.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #1da1f2;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}

.pulse-btn::after {
  animation-delay: 1s;
}

ボタンから広がる2つの波紋は、::beforeと::afterで実装しています。

それぞれにposition: absolute、上下左右の値を0、margin: autoを設定することで、親要素に対して上下左右に中央揃えすることができますね。

width とheightには100%と指定することで、親要素と同じサイズになります。ここに先程同様border-radiusを指定して円形を作ります。

borderプロパティには線の太さ、形状、色を指定できるので、それぞれ好みの設定を入れてください。

最後にanimationを指定することで、完成です。

animation: pulsate 2s linear infinite;

この行は、“pulsateというアニメーションを2秒間かけて実行し、無限に繰り返す”という指定をしています。

しかし::before と::afterどちらにも同じアニメーションを設定してしまうと、要素が重なり合っているため、波紋が1つしか見えませんね。

これを避けるために、2つ目の波紋にはanimation-delay: 1sをかけて、アニメーションを1秒間遅らせています。

これで波紋のスタイルは完成なので、次でアニメーションの中身を作っていきましょう。

CSSパート3. 波紋が広がるアニメーション

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

こちらがアニメーションpulsateの中身です。

このアニメーション内では、

  1. 波紋が徐々に大きくなる
  2. 波紋が徐々に透明になる

という2つの動作を指定しています。

まず波紋の大きさを徐々に拡大するのは、transformプロパティのscale関数を使用しています。

0%の時点(アニメーション開始時)では、scaleの値は1、100%の時点(アニメーション終了時)では2になっていますね。

これはアニメーションが進むにつれて徐々に拡大していき、終了時に元の2倍の大きさにするという指定になります。

続いて、波紋を徐々に透明にしていくのは、opacityプロパティの値を操作します。

開始時にはopacityの値が1(不透明)、終了時に0(透明)という指定をすることで、アニメーションが進むにつれて透明になっていくという動作を実装しています。

これでアニメーションの中身が完成しましたね。

以上のコードで、ボタンから波紋が広がっていくエフェクトの実装完了です！

【カスタマイズ】ボタンをホバー時のみ波紋が広がるエフェクトをONにする

デフォルトのままだと、アニメーションが常に発生していますね。

これを、ボタンをホバーしている間のみ波紋エフェクトをONにするように改良していきます。

上のボタンをホバーしてみてください。ホバーしている間のみ、波紋が発生しているのを確認できたかと思います。

スマホやタブレット等のモバイル端末では、ホバーすることができません。またCSSだけではモバイル端末かそうでないかの判別はできないため、ブラウザの横幅が768px以下の場合は常にアニメーションをONにする指定をしています。

実装内容が確認できたら、実際のコードを見ていきましょう。

カスタマイズ手順1. HTMLでボタン要素を作成

<a class="pulse-btn">
  <img src="画像のパスを記入">
</a>

HTMLはそのまま同じものを使用します。

画像の部分は、各自で用意してください。

カスタマイズ手順2. CSSにホバー時のアクションとメディアクエリを追加する


.pulse-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1da1f2;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.pulse-btn img {
  width: 60%;
}

.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #1da1f2;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.pulse-btn:hover {
  box-shadow: 0 0 20px #1da1f2;
}

.pulse-btn:hover::before, 
.pulse-btn:hover::after {
  animation: pulsate 2s linear infinite;
}

.pulse-btn:hover::after {
  animation-delay: 1s;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .pulse-btn {
    box-shadow: 0 0 20px #1da1f2;
  }

  .pulse-btn::before, .pulse-btn::after {
    animation: pulsate 2s linear infinite;
  }

  .pulse-btn::after {
    animation: pulsate 2s linear infinite;
  }
}

CSSコードはほとんど同じなので、デフォルトの分と異なる部分だけハイライト表示しています。

新しくpulse-btn:hoverのセレクタを書き、その中にanimationの記述をすることで、ホバー時にのみアニメーションを発生させています。

また、ホバーできないモバイル端末用にメディアクエリを書き足して、横幅768px以下ではアニメーションを常に実行するよう指定しました。

これでカスタマイズは完了です！

【まとめ】ボタンから波紋が広がるエフェクトはCSSで簡単に実装可能！

CSSのみで、波紋が広がるエフェクト付きボタンを簡単に実装することができましたね。

ボタン要素に使用することで、クリック率の向上させることができるかと思いますので、ぜひ使ってみてください。

また、以下のようなボタンも作成しましたので、興味がある方はこちらの記事もどうぞ。

あわせて読みたい
【CSSのみ】ホバーするとハートがふわっと浮かび上がるボタンを実装する方法 CSSで手軽にアニメーションを設定できるようになった今、Webサイト上には様々なアニメーションが見られますね。 中でもWebページ上のボタンには、アニメーションが設定…

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中！

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

POST
CSS
ボタン ホバーアニメーション
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次