React Shimmer Button Component: A Customizable Button with Animated Effects

Buttons 23

About

This React component renders a customizable button with various visual enhancements, including a 3D effect, hover animations, and a unique shimmer effect triggered by mouse movement. It offers options for size, variant (default or secondary), and custom shimmer color. The component utilizes CSS variables and keyframes for animation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds React Shimmer Button Component: A Customizable Button with Animated Effects to your project and fits it to your theme.

Code

How React Shimmer Button Component: A Customizable Button with Animated Effects is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import {ShimmerButton, type ShimmerButtonProps} from "@/components/ui/shimmer-button";

export default function ShimmerButtonDemo() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-8 w-full">
      {/* Grain overlay for aesthetic */}
      
      <div className="relative z-10 flex flex-col items-center gap-8">
        {/* Main demo */}
        <div className="text-center space-y-4">
         
          
          <ShimmerButton onClick={() => alert('Hello from Shimmer Button!')}>
            Contact Us
          </ShimmerButton>
        </div>
        
      </div>
    </div>
  );
}