Rainbow Button

CODE

HTML

<div class="demo-stage rnb-stage">
  <button type="button" class="rnb-btn">Get Started <span aria-hidden="true">→</span></button>
</div>

CSS

.rnb-stage { display:flex; align-items:center; justify-content:center; padding:2rem; background:#0B0B10; min-height:280px; isolation:isolate; }
.rnb-btn {
  --rnb: linear-gradient(90deg, #ff4d4d, #f9cb28, #4ade80, #22d3ee, #a78bfa, #ff4d8d, #ff4d4d);
  position:relative; padding:.95rem 2rem; border:2px solid transparent; border-radius:12px; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem; color:#fff;
  background: linear-gradient(#121214, #121214) padding-box, var(--rnb) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: rnb-flow 3s linear infinite;
  transition: transform .2s ease;
}
.rnb-btn::before {
  content:''; position:absolute; left:10%; right:10%; bottom:-10px; height:14px; z-index:-1;
  background: var(--rnb); background-size:200% 100%; filter:blur(12px); opacity:.85;
  animation: rnb-glow 3s linear infinite;
}
.rnb-btn:hover { transform:translateY(-2px); }
.rnb-btn:active { transform:translateY(0) scale(.98); }
.rnb-btn:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@keyframes rnb-flow { to { background-position: 0 0, 200% 0; } }
@keyframes rnb-glow { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .rnb-btn, .rnb-btn::before { animation:none; }
  .rnb-btn { transition-duration:.01ms; }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

縁と足もとの光に虹色のグラデーションが流れ続けるボタンをCSSだけで作って。ボタンは border: 2px solid transparent にし、background を2層にする：1層目は単色の linear-gradient を padding-box に、2層目は虹色の linear-gradient を border-box に塗る。これで内側は単色、枠線の部分だけ虹色が見える（疑似要素で枠を重ねる必要がない）。虹色の層だけ background-size: 200% 100% にして、background-position を 0 → 200% へ3秒 linear で無限ループさせると色が流れる。足もとの光は ::before に同じグラデーションを置き、filter: blur(12px) で広げて z-index:-1 でボタンの下へ敷く（親に isolation: isolate を付けて背面に潜りすぎないようにする）。ホバーで translateY(-2px)、:focus-visible のアウトラインを残す。@media (prefers-reduced-motion: reduce) で animation を止める。

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

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

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

Rainbow Button（レインボーボタン）とは

枠線とボタンの足もとに虹色のグラデーションが流れ続けるボタンです。Magic UI の同名コンポーネントで広まり、暗い背景のLPで「ここを押してほしい」という主要な行動ボタンを1つだけ際立たせる用途に使われます。

当サイトの Tailwind Gradient Button はボタン全体をグラデーションで塗る作り、Aurora Button はオーロラ状の光をまとう演出、Shimmer Button は表面を光が横切る演出です。本ページは中は単色のまま、縁と足もとだけに流れる虹色を置く別テーマで、文字の読みやすさを保てます。

要点は背景の塗り分けで、疑似要素を枠用に使わないぶん、足もとの光に ::before を回せます。虹色は強い装飾なので、1画面に1つまでにして、ほかのボタンは落ち着いた色にそろえてください。

よくある質問

padding-box と border-box の塗り分けとは何ですか？

background は層ごとに塗る範囲を指定できます。単色の層を padding-box（枠線の内側まで）、グラデーションの層を border-box（枠線まで）に塗ると、単色が上に重なって中を隠し、枠線の部分にだけグラデーションが見えます。border-image と違って border-radius の角丸もそのまま効きます。

光が流れ続けると目障りになりませんか？

画面に1つだけ置く主要な行動ボタン（登録・購入など）に限れば、視線を集める効果のほうが大きくなります。同じ画面に複数置くとどれも目立たなくなり、落ち着かない印象になります。動きを減らす設定の利用者には animation を止め、静止した虹色の縁で見せてください。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

Rainbow Button（レインボーボタン）とは

よくある質問