Pulsating Button

DEMO

<div class="demo-stage pls-stage">
  <button type="button" class="pls-btn">今すぐ予約する</button>
</div>

.pls-stage { display:flex; align-items:center; justify-content:center; padding:2rem; background:#0B0B10; min-height:280px; }
.pls-btn { --pls: 233,27,137;
  position:relative; padding:.95rem 2rem; border:0; border-radius:999px; cursor:pointer;
  background:rgb(var(--pls)); color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem;
  transition: transform .2s ease;
}
.pls-btn::before, .pls-btn::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  animation: pls-ring 1.8s cubic-bezier(.22,1,.36,1) infinite; }
.pls-btn::after { animation-delay:.9s; }
@keyframes pls-ring {
  0% { box-shadow:0 0 0 0 rgba(var(--pls),.55); }
  100% { box-shadow:0 0 0 18px rgba(var(--pls),0); }
}
.pls-btn:hover { transform:translateY(-2px); }
.pls-btn:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media (prefers-reduced-motion: reduce) {
  .pls-btn::before, .pls-btn::after { animation:none; box-shadow:0 0 0 4px rgba(var(--pls),.35); }
  .pls-btn { transition-duration:.01ms; }
}

AI PROMPT

ボタンの外側に波紋のような輪が繰り返し広がる Pulsating Button をCSSだけで作って。ボタンの色を RGB の数値だけでカスタムプロパティ --pls（例: 233,27,137）に持たせ、背景は rgb(var(--pls))、波紋は rgba(var(--pls), 透明度) で書く（1か所変えるだけで色を差し替えられる）。::before と ::after を inset:0・border-radius: inherit で重ね、@keyframes で box-shadow を 0 0 0 0 rgba(色,.55) から 0 0 0 18px rgba(色,0) へ1.8秒で広げて無限ループさせる。::after だけ animation-delay を .9秒ずらすと、波紋が途切れず連続して見える。transform: scale ではなく box-shadow の広がりで作るのは、ボタン本体や文字を拡大させずに輪だけを広げるため。ホバーで translateY(-2px)、:focus-visible のアウトラインを残す。@media (prefers-reduced-motion: reduce) では波紋を止め、薄い輪を1本だけ静止表示する。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

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

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

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