Glow Button
A bold button with a soft glowing gradient that lights up on hover, creating a polished and eye-catching call to action.
Installation
npx shadcn@latest add https://fluxbuttons.vercel.app/r/glow-button.json"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
export interface GlowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
const GlowButton = React.forwardRef<HTMLButtonElement, GlowButtonProps>(
({ className, children, ...props }, ref) => {
return (
<div className="relative inline-block group">
<div className="absolute inset-0 z-0 pointer-events-none opacity-0 group-hover:opacity-100 transition duration-500 blur-2xl bg-gradient-to-r from-green-500 to-yellow-500" />
<div className="relative rounded-xl p-[1px] bg-gradient-to-r from-green-500 to-yellow-500">
<button
ref={ref}
className={cn(
"relative flex overflow-hidden items-center justify-center whitespace-nowrap px-6 h-12 rounded-xl bg-black text-white font-semibold text-lg",
className,
)}
{...props}
>
{children || "Get Started"}
</button>
</div>
</div>
);
},
);
GlowButton.displayName = "GlowButton";
export default GlowButton;Usage
import GlowButton from "@/components/ui/glow-button";
const GlowButtonPreview = () => {
return <GlowButton>Hover Me</GlowButton>;
};
export default GlowButtonPreview;API Reference
Glow Button
The Glow Button component is a wrapper around the button element that adds a variety of styles and functionality.
Prop
Type
Slide Icon Button
A button with a sliding icon overlay that expands on hover, smoothly transitioning the icon while fading out the label for a clean, directional interaction.
Shadow Pop Button
A bold button that pops on hover with contrasting dual-color shadows, creating a punchy, retro-style depth effect.