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, clMagneticButton
Buttons
'use client';
import { useState } from 'react';
interface LoadingButtonProps {
onClick: () => void;
}
const LoadingButton = () => {
const [isLoading, setIsLoading] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
consLoadingButton
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