Shimmer Button

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

A spark of light circles the edge of a black pill button.

Code

"use client";

import { ShimmerButton } from "@/lab/magicui/ui/shimmer-button";

export default function ShimmerButtonDemo() {
  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <ShimmerButton className="shadow-2xl">
        <span className="text-center text-sm leading-none font-medium tracking-tight whitespace-pre-wrap text-white lg:text-lg">
          Shimmer Button
        </span>
      </ShimmerButton>
    </div>
  );
}

Prompt

Build "Shimmer Button", a button animation. What it does: A spark of light circles the edge of a black pill button. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/shimmer-button (Magic UI, MIT).