No.021
BUTTON CSSJS

Ripple Effect

ボタンクリック地点から波紋が広がるマテリアルデザイン定番の効果。押した実感を与えフォーム送信・CTAに最適。

DEMO

CODE

HTML
<div class="demo-stage"><button class="rp-btn" id="rpBtn">CLICK ME</button></div>
CSS
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.rp-btn { position:relative; overflow:hidden; padding:1.1rem 3rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; font-size:1rem; cursor:pointer; border-radius:6px; }
.rp-ripple { position:absolute; border-radius:50%; background:rgba(233,27,137,.55); transform:scale(0); animation:rp-go .6s ease-out; pointer-events:none; }
@keyframes rp-go { to { transform:scale(2.6); opacity:0; } }
JS
document.getElementById('rpBtn').addEventListener('click', function(e){
  const r = document.createElement('span'); r.className = 'rp-ripple';
  const rect = this.getBoundingClientRect();
  const size = Math.max(rect.width, rect.height);
  r.style.width = r.style.height = size + 'px';
  r.style.left = (e.clientX - rect.left - size / 2) + 'px';
  r.style.top = (e.clientY - rect.top - size / 2) + 'px';
  this.appendChild(r);
  setTimeout(function(){ r.remove(); }, 600);
});

AI PROMPT

Claude Cursor v0
PROMPT
ボタンにマテリアルデザインのリップル（波紋）効果を作って。クリック位置から半透明ピンクの円がscale(0)→scale(2.6)で広がりながらフェードアウト、.6s ease-out。ボタンはposition:relative+overflow:hidden、波紋はgetBoundingClientRectでクリック座標を計算してspanを動的生成、終了後removeする。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

波紋（リップル）エフェクト（Ripple Effect）とは

ボタンクリック地点から波紋が広がるマテリアルデザイン定番の効果。押した実感を与えフォーム送信・CTAに最適。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

CTAボタン・フォーム送信ボタン・申し込みボタンなど、クリックを促したい箇所のアクセントに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。