Creative Buttons

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.

The buttons are located in the components/creative-buttons directory. Copy the specific button files you need to your components directory.

Available Buttons

GradientGlowButton

A button with a vibrant gradient and glowing shadow effect.

Preview
Code

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>
  );
}

children

React.ReactNode

required

Button content

className

string

Additional CSS classes

AnimatedBorderButton

A button with an animated gradient border that moves around the edges.

Preview
Code

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>
  );
}

children

React.ReactNode

required

Button content

className

string

Additional CSS classes

RetroButton

A nostalgic button with a retro aesthetic and pressed effect.

Preview
Code

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>
  );
}

children

React.ReactNode

required

Button content

className

string

Additional CSS classes

PurpleGradientButton

A vibrant purple gradient button with a border effect.

Preview
Code

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>
  );
}

children

React.ReactNode

required

Button content

className

string

Additional CSS classes

NeumorphismButton

A button with a soft, neumorphic design aesthetic.

Preview
Code

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>
  );
}

children

React.ReactNode

required

Button content

className

string

Additional CSS classes

RainbowButton

An animated rainbow gradient button with optional star display.

Preview
Code

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>
  );
}

children

React.ReactNode

required

Button content

showStars

boolean

default:"false"

Whether to show the star icon and count

starCount

number

default:"11"

Number of stars to display

className

string

Additional CSS classes

GitHubStarButton

A specialized button for GitHub repository stars with icon.

Preview
Code

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>
  );
}

children

React.ReactNode

required

Button text content

starCount

number

default:"11"

Number of GitHub stars to display

showIcon

boolean

default:"true"

Whether to show the GitHub icon

className

string

Additional CSS classes

Common Props

All button components extend the standard HTML button element and accept these common props:

onClick

() => void

Click event handler

disabled

boolean

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

Button Group

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>
  );
}

Form Submit Button

Use with forms:

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.

Getting Started

Creative Components

Core Components

Form Components

Data Display

Hooks

Creative Buttons

Installation

Available Buttons

GradientGlowButton

AnimatedBorderButton

RetroButton

PurpleGradientButton

NeumorphismButton

RainbowButton

GitHubStarButton

Common Props

Examples

Button Group

Form Submit Button

Disabled State

With Icons

Styling Tips

Accessibility

Build docs developers (and LLMs) love

Getting Started

Creative Components

Core Components

Form Components

Data Display

Hooks

Documentation Index

​Installation

​Available Buttons

​GradientGlowButton

​AnimatedBorderButton

​RetroButton

​PurpleGradientButton

​NeumorphismButton

​RainbowButton

​GitHubStarButton

​Common Props

​Examples

​Button Group

​Form Submit Button

​Disabled State

​With Icons

​Styling Tips

​Accessibility

Build docs developers (and LLMs) love

Installation

Available Buttons

GradientGlowButton

AnimatedBorderButton

RetroButton

PurpleGradientButton

NeumorphismButton

RainbowButton

GitHubStarButton

Common Props

Examples

Button Group

Form Submit Button

Disabled State

With Icons

Styling Tips

Accessibility