Glowy Button Component

Refinery

Glowy Button

Button with dynamic glow that follows the cursor on hover.

Preview

Default pair:

Primary

Ghost

With custom brand color:

With icon:

Size = lg

Subtle spotlight

Hover over the buttons to see the glowy magic in action!

Installation

1. Run the following command in your terminal:

npx shadcn@latest add https://refinery.abhii.me/r/glowy-button.json

API Reference

Component props
Name	Type	Description
variant	"primary" \| "ghost"	Visual style variant of the button. Dark opaque vs light surface.
size	"sm" \| "md" \| "lg"	Size of the button, affecting padding and font size.
colorFrom	string	Starting color for the glow gradient. Accepts any CSS color string.
colorTo	string	Ending color for the glow gradient. Accepts any CSS color string.
glowStrength	number	Intensity of the glow effect, ranging from 0 (no glow) to 1 (full glow).
className	string	Additional CSS classes to apply to the button for custom styling.
All native <button> attributes	-	onClick, disabled, type, etc. are all supported and can be passed directly to the component.

Usage Recommendations

The glowy button works best on darker bg where the glow can really pop, but it can be used on lighter bg too for a more subtle effect.

When installing shadcn, you can choose the 'nova' preset (lucide/geist) to match the intended typography.

Design Notes

I built the glow with layered elements: a conic gradient for the ambient edge light, and a radial gradient above it that follows the cursor like a small spotlight. You can tune the glow colors and use glowStrength to control how intense those layers feel. Motion handles the hover animation, and you can keep the defaults or adapt the layers for a softer product-style button.