M-002 Neon Pulse Button | Vibe UI Pattern Library

ライブデモ Live Demo

CTAボタンはグラデーションで塗りつぶされ、グロー強度とパルス速度を制御するカスタムプロパティでアニメーション化されます。スライダーで望む強度を調節してください。

The CTA button is filled with a gradient and animated via custom properties that control glow strength and pulse speed. Use the slider to dial in the desired intensity.

グロー強度 Glow strength 0.9

パルス速度（秒） Pulse speed (seconds) 2.4s

AI向け説明 AI Description

`M-002` は `@keyframes` アニメーションでグラデーション背景のCTAボタンをパルスさせます。`--glow-strength` で `box-shadow` の発光強度を、`--pulse-duration` でアニメーション速度を制御します。`::after` 疑似要素がインナーリングのハイライトを追加します。

`M-002` pulses a gradient CTA button via `@keyframes` animation. `--glow-strength` controls `box-shadow` intensity and `--pulse-duration` controls speed. A `::after` pseudo-element adds an inner highlight ring.

調整可能パラメータ Adjustable Parameters

--glow-strength — 発光エフェクトの強度を調整 adjust intensity of glow effect
gradient colors — linear-gradient の停止点をブランドカラーに置換 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

HTML + CSS

<button class="pulse-button">Start Flow</button>

<style>
:root {
  --pulse-duration: 2.4s;
  --glow-strength: 0.9;
}

.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)) rgba(111, 107, 255, 0.9),
    0 0 calc(54px * var(--glow-strength)) rgba(255, 119, 169, 0.7);
  animation: neonPulse var(--pulse-duration) 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);
  }
}
</style>

React (JSX + CSS)

// react/M-002.jsx
import "./M-002.css";

export default function NeonPulseButton({
  glow = 0.9,
  speed = 2.4,
  children = "Start Flow"
}) {
  return (
    <button
      className="pulse-button"
      style={{
        ["--glow-strength"]: glow,
        ["--pulse-duration"]: `${speed}s`
      }}
    >
      {children}
    </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); }
}

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

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: M-002
- パターン名: ネオン発光ボタン
- 参照URL: https://devsnips.dev/animations/M-002.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: M-002
- Pattern Name: Neon Pulse Button
- Reference URL: https://devsnips.dev/animations/M-002.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

ボタンの背後にSVGグローやパーティクルを重ねるとヒーローCTAになります。このページに記載されたパターンを拡張してリップル展開や連鎖パルスを追加してください。

Layering SVG glows or particles behind the button turns it into a hero CTA. Add ripple spreads or chained pulses by extending the patterns documented on this page.