誰でもできる！Studioで🌈 虹色にじんわり発光するボタンを実装する方法

サイトを開いたとき、ふわっと光るボタンってなんだかワクワクしませんか？ほんの少し光が動くだけで、ボタンが生きているみたいに見えるんです。

今回はそんな"じんわり虹色に光るボタン"を、ノーコードの『Studio』だけで再現する方法を紹介します。コードを書くのが苦手でも大丈夫。Embedをひとつ置くだけでOKです👌

💡 まずは完成イメージ

このように、ボタンのまわりがふわっと光り、時間とともに虹色がやさしく循環します。クリックを誘うような、やわらかい存在感が出せるのがポイントです。

🪄 手順は6ステップだけ

1. ボタンをつくる — Studioのデザインエディタで、通常のボタンを作成します。
2. IDを設定する — 右側の「詳細設定」から、要素IDにbtnを入力します。このIDがカスタムコードと連動する"合言葉"になります。
3. 背景カラーを設定する — 今回はボタンの背景をグラデーション（左：#f12eeb／右：#2575fc）を使用していますが、単色でもOK。お好みの色味で試してみてください🎨
4. EmbedのBoxを追加 — 同じセクション内にEmbedを配置します。ここに下記にあるカスタムコード「パターン1」or「パターン2」を貼り付けます。
5. Embedサイズを0pxに — Embedがデザインに干渉しないよう、横幅0px・縦幅0pxに変更しておきましょう。
6. グループ化（任意） — ボタンとEmbedをグループ化しておくと、デザインが整いやすいです。階層構造は下のイメージの通りです。

🌈 パターン①：ボタン全体が虹色に光る

全体がやさしく発光するタイプ。グラデーションが流れるように動いて、どんな背景にも映えます。

<style>
#btn {
  position: relative;
  overflow: hidden;
}

#btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    270deg,
    #ff0000,
    #ffa500,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  background-size: 400% 400%;
  opacity: 0.6;
  filter: blur(8px);
  animation: rainbow-glow 8s linear infinite;
  z-index: -1;
}

@keyframes rainbow-glow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 25px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 255, 255, 0.2);
  opacity: 0.4;
  animation: glow-pulse 3s ease-in-out infinite alternate;
  z-index: -2;
}

@keyframes glow-pulse {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}
</style>

💫 パターン②：中心からにじむタイプ

こちらは中央から光がじわじわ広がるタイプ。静かな呼吸のように見えて、個人的にお気に入りです。

<style>
#btn { position: relative; overflow: hidden; }

#btn::before{
  content:"";
  position:absolute; inset:-6px; border-radius:inherit; pointer-events:none;
  background:
  radial-gradient(180px 120px at 50% 55%,
  rgba(255,0,0,.35),
  rgba(255,165,0,.35) 20%,
  rgba(255,255,0,.35) 35%,
  rgba(0,255,0,.35) 50%,
  rgba(0,255,255,.35) 65%,
  rgba(0,0,255,.35) 80%,
  rgba(255,0,255,.35) 100%,
  transparent 120%);
  filter: blur(6px);
  opacity:.55;
  animation: btn-rainbow-shift 8s linear infinite;
  z-index:-1;
}

@keyframes btn-rainbow-shift{
  0% { filter: hue-rotate(0deg) blur(6px); opacity:.55; }
  50% { filter: hue-rotate(180deg) blur(8px); opacity:.65; }
  100% { filter: hue-rotate(360deg) blur(6px); opacity:.55; }
}

#btn:hover::before,
#btn:focus-visible::before{
  opacity:.75;
}
</style>

🔧 カスタマイズのヒント

• 発光スピードを変えたい → 8sの値を変更（短くすると速く）
• 光の強さを変えたい → opacityを調整（0.3〜0.8が目安）
• ぼかし具合を調整したい → blur(8px)を好みに変更

ちょっと数値を変えるだけで雰囲気がガラッと変わるので、自分のブランドカラーに合わせて遊んでみてください。

🚀 まとめ

今回のテーマは「ボタンひとつでサイトの印象を変える」🌈難しそうに見えても、実はEmbedひとつ＋CSS数行で完成します。

LPのCTAボタン、キャンペーンページ、ブランドサイトなど、ちょっとした演出で"目に留まる"体験を作りたいときにぜひ使ってみてください。