I-002 Interaction medium

How to create a button ripple effect ボタンリップルエフェクトの作り方

Ripple effect that expands from click position. Adjust ripple size and speed. ボタンクリック時に波紋が広がるリップルエフェクト。波紋のサイズと速度を調整できます。

button ripple click animation

ライブデモ Live Demo

0.6s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Ripple effect that expands from click position. Adjust ripple size and speed.

ボタンクリック時に波紋が広がるリップルエフェクト。波紋のサイズと速度を調整できます。

どこで使うかWhere to use

user engagement, data entry, content management, settings panel

ボタン、リストアイテム、クリッカブルカード、フォームコントロール

特徴Key features

Ripple originates from the exact click coordinate for a natural Material Design feel. JavaScript calculates the ripple position and size dynamically. CSS handles the fade+scale animation. Multiple rapid clicks stack multiple ripples.

クリック座標から発生するリップルでナチュラルなMaterial Designの感触を実現。JavaScriptがリップルの位置とサイズを動的に計算。フェード+スケールアニメーションはCSSで処理。素早い連続クリックで複数リップルが重なる。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--ripple-duration—ripple animation duration
--ripple-color—ripple color
ripple size—final expansion size (scale value)
multiple ripples—show multiple ripples on rapid clicks

実装コード Implementation Code 

<button class="ripple-button">Click Me</button>



<script>
const button = document.querySelector(".ripple-button");

button.addEventListener("click", (e) => {
  const rect = button.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const ripple = document.createElement("span");
  ripple.className = "ripple-effect";
  ripple.style.left = `${x}px`;
  ripple.style.top = `${y}px`;
  button.appendChild(ripple);
  setTimeout(() => ripple.remove(), 600);
});
</script>
/* react/I-002.css */
.ripple-button {
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  background: linear-gradient(135deg, #5c6ac4, #22d3ee);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  width: 20px;
  height: 20px;
  transform: scale(0);
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
import { useState } from "react";
import "./I-002.css";

export default function ButtonRippleEffect({ children, onClick }) {
  const [ripples, setRipples] = useState([]);

  const handleClick = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const size = Math.max(rect.width, rect.height);
    const newRipple = { x, y, size, id: Date.now() };
    
    setRipples([...ripples, newRipple]);
    
    setTimeout(() => {
      setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
    }, 600);

    if (onClick) onClick(e);
  };

  return (
    <button className="ripple-button" onClick={handleClick}>
      {children}
      {ripples.map((ripple) => (
        <span
          key={ripple.id}
          className="ripple-effect"
          style={{
            left: `${ripple.x - ripple.size / 2}px`,
            top: `${ripple.y - ripple.size / 2}px`,
            width: `${ripple.size}px`,
            height: `${ripple.size}px`
          }}
        />
      ))}
    </button>
  );
}
/* Ripple button styles are now in global.css */

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

On click, JavaScript calculates the cursor position relative to the button (using getBoundingClientRect). A <span> element is created at that position with width and height set to the diagonal length of the button (ensuring the ripple covers the full element). A CSS animation scales it from 0 to 1 while fading out, then the element is removed.

クリック時にJavaScriptがボタンに対するカーソル位置（getBoundingClientRectを使用）を計算。その位置に<span>要素を作成し、widthとheightをボタンの対角線長（リップルが要素全体をカバーするように）に設定。CSSアニメーションで0から1にスケールしながらフェードアウト、その後要素を削除。

カスタマイズ方法Customization

Change --ripple-color to match your brand (white for dark buttons, a tint for light ones). Slow down --ripple-duration for a longer, more visible effect. Add overflow: hidden to the button so the ripple is clipped to the button boundary.

--ripple-colorをブランドカラーに変更（ダークボタンには白、ライトボタンには色付き）。--ripple-durationを遅くして長く目立つエフェクトに。ボタンにoverflow:hiddenを追加してリップルをボタン境界内にクリップ。

注意点Caveats

The ripple is a pure visual enhancement. Ensure the button has proper accessible label (aria-label or visible text) and focus styles independent of the ripple. Remove the ripple span from the tab order so it is not focusable.

リップルは純粋なビジュアル向上です。ボタンにリップルとは独立した適切なアクセシブルラベル（aria-labelまたは可視テキスト）とフォーカススタイルを設定してください。リップルspanをタブ順から除外してフォーカス可能にならないようにしてください。

よくある質問 Frequently Asked Questions

How to customize the button ripple effect? Button Ripple Effectをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the button ripple effect in React? ReactでButton Ripple Effectを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of button ripple effect? Button Ripple Effectのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.