M-002 Animation medium

How to create a neon pulse button ネオン発光ボタンの作り方

A gradient CTA button breathes with a neon glow whose intensity and speed are adjustable via custom properties. グラデーションCTAが呼吸するように発光し、強度やスピードをカスタムプロパティで調整できます。

button glow pulse cta

ライブデモ Live Demo

0.9
2.4s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

A gradient CTA button breathes with a neon glow whose intensity and speed are adjustable via custom properties.

グラデーションCTAが呼吸するように発光し、強度やスピードをカスタムプロパティで調整できます。

どこで使うかWhere to use

hero section, micro interaction, visual feedback, brand expression

CTAボタン、ゲームUI、ダークテーマサイト、プロモーションバナー

特徴Key features

Layered CSS box-shadow animations create a vivid neon glow pulse effect. No JavaScript required. Fully customizable glow color and intensity via CSS variables. Smooth infinite pulse loop with ease-in-out timing.

複数のbox-shadowを重ねたCSSアニメーションで鮮やかなネオングロウを実現。JavaScript不要。グロウカラーと強度はCSSカスタムプロパティで自由に調整可能。ease-in-outでなめらかな無限パルスループ。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--glow-strength—adjust intensity of glow effect
gradient colors—replace linear-gradient stops with brand colors
--pulse-duration—animation duration to control pulse speed
prefers-reduced-motion—static version for reduced motion preference

実装コード Implementation Code 

<button class="pulse-button">Start Flow</button>
/* react/M-002.css */
.pulse-button {
  border: none;
  border-radius: 999px;
  padding: 18px 46px;
  font-size: 20px;
  font-weight: 600;
  color: #060612;
  background: linear-gradient(120deg, #6d6bff, #ff77a9, #21f6d0);
  box-shadow:
    0 0 calc(32px * var(--glow-strength, 0.9)) rgba(111, 107, 255, 0.9),
    0 0 calc(54px * var(--glow-strength, 0.9)) rgba(255, 119, 169, 0.7);
  animation: neonPulse var(--pulse-duration, 2.4s) ease-in-out infinite;
  cursor: pointer;
}

@keyframes neonPulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.04); filter: saturate(1.35); }
}
import { useState } from "react";
import "./M-002.css";

export default function NeonPulseButton() {
  const [intensity, setIntensity] = useState(0.9);

  return (
    <section className="neon-pulse" style={{ "--glow-strength": intensity }}>
      <button className="neon-pulse__button">Glow CTA</button>
      <label className="neon-pulse__label">
        <span>Glow strength</span>
        <input
          type="range"
          min="0.5"
          max="1.4"
          step="0.1"
          value={intensity}
          onChange={(event) => setIntensity(Number(event.target.value))}
        />
        <output>{intensity.toFixed(1)}</output>
      </label>
    </section>
  );
}
:root {
  --glow-strength: 0.9;
  --pulse-duration: 2.4s;
}

.neon-pulse {
  background: radial-gradient(circle at top, #0d102b, #05060f);
  border-radius: 24px;
  padding: clamp(20px, 5vw, 36px);
  color: #f7f7ff;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.neon-pulse__button {
  border: none;
  border-radius: 999px;
  padding: 18px 48px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #040412;
  background: linear-gradient(120deg, #6a5afc, #ff77a9, #22d3ee);
  box-shadow: 0 0 calc(34px * var(--glow-strength)) rgba(106, 90, 252, 0.95),
    0 0 calc(52px * var(--glow-strength)) rgba(255, 119, 169, 0.7);
  animation: neonPulse var(--pulse-duration) ease-in-out infinite;
  cursor: pointer;
}

.neon-pulse__label {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 600;
}

.neon-pulse__label input[type="range"] {
  flex: 1;
  min-width: 160px;
}

@keyframes neonPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A @keyframes animation cycles the CSS box-shadow property between a minimal glow and an expanded multi-layered glow, simulating the pulsing light of a neon sign. The gradient fill on the button text is achieved with background-clip: text.

@keyframesアニメーションでbox-shadowを最小グロウから多層グロウへサイクルさせ、ネオンサインの点滅光をシミュレートします。ボタンテキストのグラデーション塗りはbackground-clip: textで実現。

カスタマイズ方法Customization

Adjust --neon-color to change the entire glow palette at once. Modify the shadow spread radii in @keyframes to make the glow more subtle or intense. Change animation-duration to speed up or slow down the pulse rhythm.

--neon-colorでグロウカラーをまとめて変更。@keyframesのshadowスプレッド半径でグロウの強弱を調整。animation-durationでパルスのテンポを変更。

注意点Caveats

Heavy box-shadow animations can impact performance on low-end devices. Wrap in prefers-reduced-motion to disable the pulse for motion-sensitive users. Test contrast of the button label against both glow-on and glow-off states.

重いbox-shadowアニメーションはロースペック端末でパフォーマンスに影響することがあります。prefers-reduced-motionでパルスを無効化してください。グロウON/OFFの両状態でボタンラベルのコントラストを確認してください。

よくある質問 Frequently Asked Questions

How to customize the neon pulse button? Neon Pulse Buttonをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the neon pulse button in React? ReactでNeon Pulse Buttonを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of neon pulse button? Neon Pulse Buttonのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.