A dark button whose edge catches a light that follows the cursor, with a soft wash inside and a slow gleam travelling round at rest.
Customize
Usage
import { GlowBorderButton } from "@/components/motionkit/glow-border-button";
<GlowBorderButton>Start building</GlowBorderButton>Motion
The exact curves this component runs, plotted with Motion's own maths.
Gleam
Runs at rest
Cursor light
Pointer enters or leaves
Premium SaaS, developer tools and AI products: a primary button on a dark hero that should feel expensive.
Pointer moves write the cursor position into CSS variables on the button, and two radial gradients read them: one masked down to a one-pixel ring so only the edge lights up, and one faint wash across the face. No React state changes as the pointer moves. At rest, a conic gradient on the same ring turns slowly using an animated @property angle, and fades out on hover so the cursor light takes over.
| Prop | Type | Default | Description |
|---|---|---|---|
| glow | string | "#5FAEB4" | Colour of the light. |
| ...props | ButtonHTMLAttributes | — | Anything a <button> accepts. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/glow-border-button. It saves the file to components/motionkit and installs its dependencies.
Glow Border Button is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the gleam doesn't travel and the light doesn't follow the cursor.
Magnetic Button
A button that leans toward the cursor with a springy, physical pull.
Arrow Slide Button
A call to action whose arrow slides out on hover while a fresh one slides in from the left. Pure CSS, solid or outline.
Ink Fill Button
An outline button that floods with colour from exactly where the cursor came in, and drains out towards where it leaves.
Customize
Usage
import { GlowBorderButton } from "@/components/motionkit/glow-border-button";
<GlowBorderButton>Start building</GlowBorderButton>Motion
The exact curves this component runs, plotted with Motion's own maths.
Gleam
Runs at rest
Cursor light
Pointer enters or leaves
The live preview is free to explore. Plus unlocks the source for Glow Border Button and every other premium component.