Glow Button — React Component

Framer-style glowing CTA button with expanding shadow, radial border sweep, glass edge, and animated arrow.

CTA Sectionshoverspringbuttonctaglowframer-motionhover

Glow Button

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

href

Destination link for the CTA.

background

Inner button background color.

textColor

Button text color.

arrowColor

Arrow icon color.

radius

Corner radius in pixels.

glow

CSS box-shadow used for the resting outer glow.

borderColor

Subtle glass border color.

openInNewTab

Opens the link in a new browser tab.

Generated JSX

Copy this into your page.

<ArrowRight
  href="#"
  background="rgb(0, 0, 0)"
  textColor="rgb(255, 255, 255)"
  arrowColor="rgb(255, 255, 255)"
  radius={8}
  glow=""
  borderColor=""
  openInNewTab={false}
/>

Animation effects

hoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Glow Button

The Glow Button is a primary CTA button with a cursor-reactive glow that repositions as the mouse moves across the button surface. The glow gradient updates through a React state update, with spring physics from Framer Motion smoothing the movement for a fluid feel. The button style is configurable for size, color, and border radius. A direct drop-in upgrade to any standard Tailwind button for primary call-to-action elements that need to stand out.

Common use cases

Primary CTA buttons on hero sections
Pricing plan purchase buttons
Form submit and action buttons
Download and install buttons