波紋アニメーション付きボタンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

波紋アニメーション付きボタンを作る方法

波紋アニメーション付きボタンを作る方法を紹介します。ボタンをクリックしたときに、クリック位置から円形の波紋が広がるように表示することで、押した反応を分かりやすく伝えられます。シンプルなボタンに動きを加えたい場合や、クリック感のあるUIを作りたい場合に使いやすい表現です。

このサンプルでは、HTML・CSS・JavaScriptを使って波紋アニメーション付きボタンを作成します。CSSでボタンの見た目と波紋の広がるアニメーションを設定し、JavaScriptでクリック位置を取得して、その位置から波紋が広がるように処理します。

送信ボタン、購入ボタン、詳細ボタン、メニュー内のボタンなど、ユーザーの操作に反応を付けたい場面で活用できます。波紋の色や広がる大きさ、アニメーション速度はCSSから変更できるため、サイトのデザインに合わせてカスタマイズできます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ボタンをクリックすると、クリックした位置から円形の波紋アニメーションが広がります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>波紋アニメーション付きボタン</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ボタン配置エリア -->
  <div class="ripple-animation-button_wrap">

    <!-- 波紋アニメーション付きボタン -->
    <button class="ripple-animation-button_button" type="button">
      クリックしてください
    </button>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#f8fafc;
  font-family:sans-serif;
}

/* ボタン配置エリア */
.ripple-animation-button_wrap{
  text-align:center;
}

/* 波紋アニメーション付きボタン */
.ripple-animation-button_button{
  position:relative;
  overflow:hidden;
  padding:16px 36px;
  border:none;
  border-radius:999px;
  background:#2563eb;
  color:#ffffff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

/* 波紋 */
.ripple-animation-button_ripple{
  position:absolute;

  /* 波紋の最初の大きさ */
  /* 数値を大きくすると、出始めの円が大きくなる */
  width:20px;
  height:20px;

  border-radius:50%;

  /* 波紋の色 */
  /* rgba の最後の数値を大きくすると濃く、小さくすると薄くなる */
  background:rgba(255,255,255,.55);

  /* クリック位置を中心にして、最初は小さく表示する */
  transform:translate(-50%,-50%) scale(0);

  /* 波紋の広がる時間 */
  /* .6s を大きくするとゆっくり広がり、小さくすると素早く広がる */
  animation:ripple-animation-button_wave .6s ease-out;

  pointer-events:none;
}

/* 波紋が広がって消える動き */
@keyframes ripple-animation-button_wave{

  to{

    /* 波紋の広がる大きさ */
    /* scale(16) を大きくすると広く広がり、小さくすると控えめになる */
    transform:translate(-50%,-50%) scale(16);

    /* 最後に透明にして消す */
    opacity:0;
  }

}

// ボタンを取得
const rippleButton = document.querySelector(".ripple-animation-button_button");

// ボタンをクリックしたときの処理
rippleButton.addEventListener("click", function(event){

  // 波紋用の要素を作成
  const ripple = document.createElement("span");

  // ボタンの位置情報を取得
  const rect = rippleButton.getBoundingClientRect();

  // 波紋用のクラスを追加
  ripple.className = "ripple-animation-button_ripple";

  // クリック位置を波紋の表示位置にする
  ripple.style.left = event.clientX - rect.left + "px";
  ripple.style.top = event.clientY - rect.top + "px";

  // ボタンの中に波紋を追加
  rippleButton.appendChild(ripple);

  // アニメーション終了後に波紋を削除
  setTimeout(function(){
    ripple.remove();
  }, 600);

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにボタンを配置し、CSSで波紋アニメーションの見た目や動きを設定します。JavaScriptではクリック位置を取得し、その位置から波紋が広がるように処理を行います。

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。ボタンをクリックすると、クリックした位置から波紋アニメーションが広がります。波紋の色や大きさ、広がる速度はCSSから変更でき、クリック時の処理や波紋を削除するタイミングはJavaScriptから自由にカスタマイズできます。