Glow Button

PreviousNext

Button with glow effect on hover

Docs
animbitscomponent

Preview

Loading preview…
registry/new-york/animations/buttons/glow.tsx
"use client";
import { motion, type HTMLMotionProps } from "motion/react";
import { useHoverGlow } from "@/lib/use-hover-glow";
interface GlowButtonProps extends Omit<HTMLMotionProps<"button">, "animate"> {
  children: React.ReactNode;
  glowColor?: string;
  intensity?: number;
}
export function GlowButton({
  children,
  glowColor = "rgba(59, 130, 246, 0.5)",
  intensity = 20,
  ...props
}: GlowButtonProps) {
  const glowProps = useHoverGlow({
    glowColor,
    glowBlur: intensity,
  });
  return (
    <motion.button {...glowProps} {...props}>
      {children}
    </motion.button>
  );
}

Installation

npx shadcn@latest add @animbits/buttons-glow

Usage

import { ButtonsGlow } from "@/components/buttons-glow"
<ButtonsGlow />