Shimmering CTA button

Continuous light streak travels along the button's rounded border on a dark fill, pure CSS. Good primary CTA for a dark hero section, avoid pairing with more than one other animated element in the same viewport.

MIT · magicui button animation-hoverreact-tailwind

Get a site with blocks like this

Live preview

open in new tab ↗

import { ShimmerButton } from "@/components/magicui/shimmer-button"

export function ShimmerButtonDemo() {
  return (
    <ShimmerButton className="shadow-2xl">
      <span className="text-center text-sm leading-none font-medium tracking-tight whitespace-pre-wrap text-white lg:text-lg">
        Get started
      </span>
    </ShimmerButton>
  )
}

Block id: magicui-shimmer-buttonreact-tailwind · drop-in

More button blocks

Animated gradient-border button

21st.dev

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