← Components/Buttons

GlowButton

glowbutton-1779354170840.tsx
'use client';

import { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

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

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <button
      className={`bg-zinc-950 py-2 px-4 text-gold-500 rounded-lg border-2 border-gold-500 shadow-md shadow-gold-500/50 
        transition duration-300 ease-in-out hover:shadow-lg hover:shadow-gold-500 ${
          isHovered ? 'animate-pulse' : ''
        }`}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </button>
  );
};

export default GlowButton;

Component info

CategoryButtons
Frameworkreact
TierFREE
Views0
Copies0

About

Button with glow/neon light effect

More from 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
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 { useState } from 'react';

interface LoadingButtonProps {
  onClick: () => void;
}

const LoadingButton = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  cons
LoadingButton
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