CSSだけで実現！おしゃれな波紋エフェクトボタンの作り方【コピペOK】

4月 10, 2025 5月 16, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

今回は、シンプルなボタンに波紋エフェクトを追加する方法を紹介します。

このエフェクトは、ボタンの外側に広がる波紋のようなアニメーションを作成します。
インタラクションを向上させ、視覚的なフィードバックを与えるので、ユーザー体験が一段と魅力的になります。

この記事では、以下の内容をお届けします。

ボタンのHTMLとCSS
波紋エフェクトの実装方法
コードの詳細な解説

それでは、さっそく実装に取り掛かりましょう！

実際のコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

1. HTML構造の作成

まずは、基本となるHTMLの構造を作ります。
ボタンをaタグで作成し、その周りをdivタグで囲んでいます。このボタンをクリックすると、波紋が広がるエフェクトを表示させます。

<div class="button_wrap">
  <a href="#" class="button">ボタン</a>
</div>

上記のコードではaタグにclass="button"を指定して、後でスタイルを当てる準備をします。

2. CSSでボタンと波紋エフェクトをデザイン

次に、ボタンと波紋のエフェクトをCSSでデザインします。以下のコードを使って、波紋がボタンの外側に広がるように設定します。

.button_wrap {
  margin: 20px;
  display: inline-block;
}

.button {
  display: block;
  padding: 1rem 0;
  width: 17rem;
  text-decoration: none;
  background: #333;
  border-radius: 30px;
  color: #fff;
  text-align: center;
  position: relative;
}

.button:before, .button:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 17rem;
  height: 3.5rem;
  top: 0px;
  left: 0px;
  border-radius: 30px;
  background: #333;
  transform: translate3d(0, 0, 0);
}

.button:before {
  animation: animation 2s ease-out infinite;
}

.button:after {
  animation: animation 2s ease-out 1s infinite;
}

@keyframes animation {
  0% {
    transform: scale(.95);
    opacity: 1;
  }
  90% {
    opacity: .1;
  }
  to {
    transform: scale(1.2, 1.4);
    opacity: 0;
  }
}