No.080
BUTTON CSSTAILWIND

Tailwind Pulse CTA

波紋が広がり続けて注意を引くCTAボタン。Tailwindのanimate-pingで実装する定番のアテンション誘導。

DEMO

CODE

HTML
<div class="demo-stage tpc-stage"><button class="tpc-btn" type="button"><span class="tpc-ping"></span><span class="tpc-text">SUBSCRIBE</span></button></div>
CSS
.tpc-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.tpc-btn { position:relative; border:none; cursor:pointer; padding:.9rem 2rem; border-radius:50px; background:#E91B89; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.9rem; }
.tpc-ping { position:absolute; inset:0; border-radius:50px; background:#E91B89; opacity:.6; animation:tpc-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.tpc-text { position:relative; }
@keyframes tpc-ping { 0% { transform:scale(1); opacity:.6; } 80%,100% { transform:scale(1.6); opacity:0; } }
TAILWIND (HTML)

上のライブデモはTailwind不要のCSS等価版です。下の animate-ping がパルスを担います（Tailwind標準アニメ）。

<button class="relative px-8 py-3 rounded-full bg-pink-600 text-white font-semibold tracking-wide">
  <span class="absolute inset-0 rounded-full bg-pink-600 opacity-60 animate-ping"></span>
  <span class="relative">SUBSCRIBE</span>
</button>

AI PROMPT

Claude Cursor v0
PROMPT
波紋が広がり続けるCTAボタンをTailwindで作って。relative なボタンの中に absolute inset-0 rounded-full bg-pink-600 opacity-60 animate-ping の波紋レイヤーと、relative なラベルを置く。animate-ping はTailwind標準で scale(2)＋フェードアウトを繰り返す。素のCSSなら @keyframes で scale(1)→scale(1.6) + opacity .6→0。新着・限定・登録誘導のアテンションに。

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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

TailwindパルスCTA（Tailwind Pulse CTA）とは

波紋が広がり続けて注意を引くCTAボタン。Tailwindのanimate-pingで実装する定番のアテンション誘導。この効果はTailwind CSSのユーティリティクラスを中心に構成され、クラスの組み合わせだけでアニメーションやホバー状態を表現します。

使いどころ

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

CSS実装のポイント

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

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。