Aurora Button

DEMO

CODE

<div class="demo-stage ab-stage"><button class="ab-btn" type="button">GET STARTED</button></div>

.ab-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.ab-btn {
  position:relative; z-index:0; padding:1.1rem 2.8rem; border-radius:999px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:.9rem; letter-spacing:.2em;
  color:#fff; background:#15151A; border:1px solid rgba(255,255,255,.16);
  transition: transform .25s ease;
}
.ab-btn::before {
  content:""; position:absolute; inset:-4px; border-radius:inherit; z-index:-1;
  background: linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6, #34d399, #22d3ee);
  background-size: 300% 300%;
  filter: blur(14px); opacity:.65;
  animation: ab-shift 6s linear infinite;
  transition: opacity .25s ease, filter .25s ease;
}
@keyframes ab-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.ab-btn:hover { transform: translateY(-2px); }
.ab-btn:hover::before { filter: blur(20px); opacity:1; }
@media (hover: none) { .ab-btn:hover { transform:none; } }

AI PROMPT

背後でオーロラ色のグローがゆらめくCTAボタンをCSSだけで作って。ボタン本体はダーク背景＋丸角。::before を inset:-4px で本体より一回り大きく重ね、linear-gradient(120deg, シアン/紫/ピンク/緑) を background-size:300% で流し、filter:blur(14px) で滲ませて z-index:-1 で背面に置く。@keyframes で background-position を往復させると光が回っているように見える。:hover で blur と opacity を強めると「押せる」感が出る。

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