Animated gradient-border button

CSS-only animated gradient background and glowing border on hover, two color variants, licensed MIT. Good as a single hero or pricing-page primary CTA, using it for every button on a page dilutes the effect and slows scanning. The GradientButton implementation itself is not shown, only this usage wrapper.

MIT · 21st.dev button animation-hoverreact-tailwind

Get a site with blocks like this

Live preview

open in new tab ↗

import { GradientButton } from "@/components/ui/gradient-button"

function Demo() {
  return (
    <div className="flex gap-8">
      <GradientButton>Get Started</GradientButton>
      <GradientButton variant="variant">Get Started</GradientButton>
    </div>
  )
}

export { Demo }

Block id: 21st-dev-button-gradient-borderreact-tailwind · code-required

More button blocks

Shimmering CTA button

magicui

Rainbow gradient CTA button

magicui

Button

shadcn

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call