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

<!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>

  <!-- 波紋アニメーション付きボタン -->
  <a
    class="ripple-outside-button_link"
    href="#">
    ボタン
  </a>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:80px 20px; /* 上下80px・左右20px。波紋がボタンの外側へ広がるための余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  text-align:center; /* ボタンを中央へ配置 */
}

/* 波紋アニメーション付きボタン */
.ripple-outside-button_link{
  position:relative; /* 波紋をボタンの位置を基準に配置 */
  display:inline-block; /* 横幅を内容に合わせる */

  padding:14px 32px;
  /* 上下14px・左右32px。
     値を大きくするとボタンが大きくなる。 */

  border-radius:10px;
  /* ボタンの角丸。
     値を大きくすると丸みが強くなる。 */

  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  text-decoration:none; /* 下線を消す */

  font-size:16px;
  /* ボタンの文字サイズ。
     値を大きくすると文字が大きくなる。 */

  font-weight:700; /* ボタンを太字にする */
  overflow:visible; /* 波紋をボタンの外側まで表示 */
  isolation:isolate; /* 波紋とボタンの重なり順を独立させる */
}

/* 波紋 */
.ripple-outside-button_ripple{
  position:absolute; /* クリック位置を基準に波紋を配置 */

  width:20px;
  height:20px;
  /* 波紋の初期サイズ。
     値を大きくすると最初の円が大きくなる。 */

  border-radius:50%; /* 波紋を円形にする */
  background:rgba(37,99,235,.28); /* 波紋の色と透明度 */
  pointer-events:none; /* 波紋がクリック操作を妨げないようにする */
  z-index:-1; /* 波紋をボタンの背面へ表示 */
  transform:translate(-50%,-50%) scale(0); /* 波紋の中心をクリック位置に合わせ、最初は縮小 */
  animation:ripple-outside-button_animation .7s ease-out forwards;
  /* 波紋を0.7秒かけて広げる。
     .7sを大きくするとゆっくり広がり、
     小さくすると速く広がる。 */
}

/* 波紋が広がるアニメーション */
@keyframes ripple-outside-button_animation{

  0%{
    opacity:1; /* 開始時は波紋を表示 */
    transform:translate(-50%,-50%) scale(0); /* クリック位置から広がり始める */
  }

  100%{
    opacity:0; /* 終了時に波紋を透明にする */
    transform:translate(-50%,-50%) scale(12);
    /* 波紋を12倍まで拡大。
       値を大きくすると波紋がより広く広がる。 */
  }

}

/* 波紋アニメーション付きボタンを取得 */
const rippleOutsideButton = document.querySelector('.ripple-outside-button_link');

/* ボタンがクリックされたとき */
rippleOutsideButton.addEventListener('click', function(event){

  /* サンプルではリンク先への移動を停止 */
  event.preventDefault();

  /* 前回の波紋を取得 */
  const oldRipple = this.querySelector('.ripple-outside-button_ripple');

  /* 前回の波紋が残っている場合は削除 */
  if(oldRipple){
    oldRipple.remove();
  }

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

  /* ボタンの位置と大きさを取得 */
  const rect = this.getBoundingClientRect();

  /* 波紋用のクラスを設定 */
  ripple.className = 'ripple-outside-button_ripple';

  /* クリックされた横方向の位置へ波紋を配置 */
  ripple.style.left = `${event.clientX - rect.left}px`;

  /* クリックされた縦方向の位置へ波紋を配置 */
  ripple.style.top = `${event.clientY - rect.top}px`;

  /* ボタンの中へ波紋を追加 */
  this.appendChild(ripple);

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

});