A curated collection of creative button components featuring gradients, animations, and unique visual effects. Each button is built with accessibility in mind and can be customized to match your design system.
Installation
Creative Buttons does not have a registry file. You’ll need to manually copy the button components from the RigidUI repository into your project. components/creative-buttons directory. Copy the specific button files you need to your components directory.
A button with a vibrant gradient and glowing shadow effect.
A purple gradient button with a glowing shadow.
import { GradientGlowButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<GradientGlowButton onClick={() => console.log('clicked')}>
Click Me
</GradientGlowButton>
);
}
Features a moving gradient border with star shine effects.
import { AnimatedBorderButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<AnimatedBorderButton onClick={() => console.log('clicked')}>
Animated Border
</AnimatedBorderButton>
);
}
Cream-colored button with brown border and shadow.
import { RetroButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<RetroButton onClick={() => console.log('clicked')}>
Retro Style
</RetroButton>
);
}
Purple gradient with darker border gradient.
import { PurpleGradientButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<PurpleGradientButton onClick={() => console.log('clicked')}>
Purple Power
</PurpleGradientButton>
);
}
Subtle shadows and highlights create a pressed, tactile effect.
import { NeumorphismButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<NeumorphismButton onClick={() => console.log('clicked')}>
Neumorphic
</NeumorphismButton>
);
}
Animated rainbow border with glow effect.
import { RainbowButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<RainbowButton
showStars={true}
starCount={42}
onClick={() => console.log('clicked')}
>
Star Me
</RainbowButton>
);
}
Whether to show the star icon and count
Number of stars to display
Rainbow button with GitHub logo and star count.
import { GitHubStarButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<GitHubStarButton
starCount={1234}
showIcon={true}
onClick={() => window.open('https://github.com/user/repo')}
>
Star on GitHub
</GitHubStarButton>
);
}
Number of GitHub stars to display
Whether to show the GitHub icon
Common Props
All button components extend the standard HTML button element and accept these common props:
Whether the button is disabled
type
'button' | 'submit' | 'reset'
default:"'button'"
Button type attribute
...props
React.ButtonHTMLAttributes<HTMLButtonElement>
All other standard button HTML attributes
Examples
Display multiple button styles together:
import {
GradientGlowButton,
RetroButton,
PurpleGradientButton,
} from "@/components/creative-buttons";
export default function ButtonGroup() {
return (
<div className="flex gap-4 flex-wrap">
<GradientGlowButton>Gradient</GradientGlowButton>
<RetroButton>Retro</RetroButton>
<PurpleGradientButton>Purple</PurpleGradientButton>
</div>
);
}
import { GradientGlowButton } from "@/components/creative-buttons";
export default function LoginForm() {
return (
<form onSubmit={(e) => {
e.preventDefault();
// Handle login
}}>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<GradientGlowButton type="submit">
Sign In
</GradientGlowButton>
</form>
);
}
Disabled State
import { AnimatedBorderButton } from "@/components/creative-buttons";
export default function Demo() {
return (
<AnimatedBorderButton disabled>
Processing...
</AnimatedBorderButton>
);
}
With Icons
import { PurpleGradientButton } from "@/components/creative-buttons";
import { Download } from "lucide-react";
export default function Demo() {
return (
<PurpleGradientButton>
<Download className="w-4 h-4 mr-2" />
Download
</PurpleGradientButton>
);
}
Styling Tips
All buttons support the className prop for additional customization using Tailwind CSS classes.
The buttons are designed to work with both light and dark modes. Some buttons (like AnimatedBorderButton) have specific dark mode styles.
Avoid overriding core animation styles as this may break the visual effects. Instead, use wrapper divs for layout adjustments.
Accessibility
All button components follow accessibility best practices:
- Proper semantic HTML (
<button> element)
- Keyboard navigation support
- Focus states
- ARIA attributes where appropriate
- Disabled state handling
Always provide meaningful button text or use aria-label when using icon-only buttons.