# Glow Border Button

> 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.

Category: Buttons · MotionKit Plus · Updated 2026-10-30 · Live demo: https://www.motionkitui.com/components/glow-border-button

## When to use it

Premium SaaS, developer tools and AI products: a primary button on a dark hero that should feel expensive.

## How it works

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.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/glow-border-button` after adding their registry token from https://www.motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `glow` | `string` | `"#5FAEB4"` | Colour of the light. |
| `...props` | `ButtonHTMLAttributes` |  | Anything a <button> accepts. |

## Accessibility

- **Keyboard: Pass.** A native <button> with a visible focus ring.
- **Screen readers: Pass.** Announced with its label; the light layers are hidden.
- **Reduced motion: Pass.** With reduced motion on, the gleam doesn't travel and the light doesn't follow the cursor.
- **Colour contrast: Pass.** Ivory text measures 16.3:1 on the button.