Glitch Button wraps a standard React button with layered RGB split animation that fires on hover, click, or continuously depending on the variant. Intensity, color channels, and duration are props, and it degrades gracefully to a flat button when reduced-motion is preferred. Built with React and Tailwind CSS. Suits cyberpunk landing pages, gaming CTAs, and anywhere you want a hover state with attitude.
Installation
Usage
import { GlitchButton } from "@/components/ui/glitch-button";// Basic usage
<GlitchButton>Click Me</GlitchButton>
// With custom colors
<GlitchButton
glitchColors={{
primary: '#ef00ef',
secondary: '#00ffff'
}}
borderColor="white"
>
Cyberpunk Button
</GlitchButton>
// Always showing glitch effect
<GlitchButton
glitchAlways={true}
glitchOnHover={false}
className="bg-black text-white"
bgClassName="bg-black"
textClassName="text-white"
>
Always Glitching
</GlitchButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
glitchOnHover | boolean | true | Whether to trigger glitch effects when hovering over the button. |
borderColor | string | "white" | Custom border color for the glitch effect. |
glitchAlways | boolean | false | Whether to continuously display the glitch effect regardless of hover/click state. |
glitchColors | { primary?: string; secondary?: string } | { primary: '#ef00ef', secondary: '#00ffff' } | Custom colors for the glitch effect with primary and secondary properties. |
className | string | "" | Additional CSS classes to apply. |
bgClassName | string | "bg-gray-900" | Background class for the glitch slice layers, e.g. "bg-black". |
textClassName | string | "text-white" | Text color class for the glitch slice layers, e.g. "text-green-400". |
children | React.ReactNode | Required | Content of the button. |