GlowButton

glowbutton-1779378412490.tsx

'use client'
import { useState } from 'react'

interface GlowButtonProps {
  children?: React.ReactNode
  variant?: 'primary' | 'secondary' | 'danger'
  size?: 'sm' | 'md' | 'lg'
  onClick?: () => void
  disabled?: boolean
}

const variants = {
  primary: { color: '#C9A84C', glow: 'rgba(201,168,76,0.4)', bg: 'rgba(201,168,76,0.1)' },
  secondary: { color: '#6366f1', glow: 'rgba(99,102,241,0.4)', bg: 'rgba(99,102,241,0.1)' },
  danger: { color: '#ef4444', glow: 'rgba(239,68,68,0.4)', bg: 'rgba(239,68,68,0.1)' },
}

const sizes = {
  sm: { padding: '8px 16px', fontSize: 13 },
  md: { padding: '12px 24px', fontSize: 15 },
  lg: { padding: '16px 32px', fontSize: 17 },
}

export default function GlowButton({ children = 'Click me', variant = 'primary', size = 'md', onClick, disabled = false }: GlowButtonProps) {
  const [hovered, setHovered] = useState(false)
  const [pressed, setPressed] = useState(false)
  const v = variants[variant]
  const s = sizes[size]

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24, padding: 40, background: '#0A0A0A', minHeight: 200, justifyContent: 'center' }}>
      {(['primary', 'secondary', 'danger'] as const).map(vname => {
        const vv = variants[vname]
        return (
          <button key={vname}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => { setHovered(false); setPressed(false) }}
            onMouseDown={() => setPressed(true)}
            onMouseUp={() => setPressed(false)}
            onClick={onClick}
            disabled={disabled}
            style={{
              position: 'relative',
              background: vv.bg,
              border: `1px solid ${vv.color}`,
              color: vv.color,
              ...s,
              borderRadius: 10,
              cursor: disabled ? 'not-allowed' : 'pointer',
              fontWeight: 700,
              fontSize: s.fontSize,
              transition: 'all 0.2s',
              transform: pressed ? 'scale(0.97)' : 'scale(1)',
              boxShadow: hovered ? `0 0 20px ${vv.glow}, 0 0 60px ${vv.glow.replace('0.4', '0.15')}` : 'none',
              letterSpacing: '0.02em',
              opacity: disabled ? 0.5 : 1,
            }}
          >
            {vname.charAt(0).toUpperCase() + vname.slice(1)}
            {hovered && (
              <span style={{
                position: 'absolute', inset: -4,
                borderRadius: 14, border: `1px solid ${vv.color}`,
                animation: 'ping 1s ease infinite',
                opacity: 0.3,
              }} />
            )}
          </button>
        )
      })}
      <style>{'.glow-ring { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; } @keyframes ping { 75%,100% { transform: scale(1.5); opacity: 0; } }'}</style>
    </div>
  )
}

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Button with animated glow effect on hover, pulsing ring, and gradient fill

More from Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y,

MagneticButton

Buttons

'use client';

import { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

const GlowButton: React.FC<GlowButtonProps> = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseE

GlowButton

Buttons

import React from 'react';
import { motion } from 'framer-motion';

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons