Shimmer Button

A dark button with a sweeping sky-blue shimmer and a glowing bottom edge. Zero dependencies, keyframes included.

ReactTailwind CSSTypeScriptButtonsMIT · Free

components/ui/shimmer-button.tsx

import * as React from "react";

export interface ShimmerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

export function ShimmerButton({ children, className = "", ...props }: ShimmerButtonProps) {
  return (
    <button
      className={[
        "group relative inline-flex h-11 items-center gap-2 overflow-hidden rounded-full",
        "border border-sky-300/30 bg-black px-6 text-sm font-medium text-sky-100",
        "transition-colors duration-300 hover:border-sky-300/60",
        className,
      ].join(" ")}
      {...props}
    >
      <style>{"@keyframes nice-shimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}"}</style>
      <span
        aria-hidden
        className="absolute inset-0 bg-gradient-to-r from-transparent via-sky-300/25 to-transparent"
        style={{ animation: "nice-shimmer 2.6s ease-in-out infinite" }}
      />
      <span
        aria-hidden
        className="absolute inset-x-6 -bottom-px h-px bg-gradient-to-r from-transparent via-sky-300 to-transparent"
      />
      <span className="relative inline-flex items-center gap-2">{children}</span>
    </button>
  );
}

Installation

Install with the shadcn CLI.

$ npx shadcn@latest add https://niceui.dev/r/shimmer-button.json

Or copy the source manually into components/ui/shimmer-button.tsx. No extra dependencies.

Usage

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

export default function Example() {
  return <ShimmerButton>Join the beta</ShimmerButton>;
}

For AI assistants

This page is also available as Markdown and as a shadcn registry item. Use Copy prompt to hand the full source to Claude, Cursor or v0.