Button - Glitched
A dynamic, animated button with glitch effects powered by GSAP and Framer Motion. Fully customizable with variants, glitch colors, and timing.
The ButtonGlitch is a highly customizable button component with a glitch animation effect.
It supports multiple variants, glitch timing, glitch colors, and standard button props like type, disabled, and onClick.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | required | Content inside the button (text, icon, etc.). |
className | string | undefined | Tailwind/utility classes to extend or override styles. |
onClick | (e: React.MouseEvent<HTMLButtonElement>) => void | undefined | Function called when the button is clicked. |
type | "button" | "submit" | "reset" | "button" | Button type. |
disabled | boolean | false | Disables the button. |
glitch | boolean | true | Enables or disables the glitch animation. |
glitchInterval | number | 3000 | Interval between glitches in ms. |
glitchDuration | number | 0.1 | Duration of each glitch step in seconds. |
glitchColors | { primary: string; secondary: string } | { "#ff0000", "#00ffff" } | Colors used for glitch shadows and text. |
variant | "default" | "primary" | "secondary" | "ghost" | "primary" | Predefined style variant for the button. |
Default Usage
<ButtonGlitch onClick={() => alert("Glitched!")}>
Default Glitch
</ButtonGlitch>Secondary Variant with Custom Colors
<GlitchButton
variant="secondary"
glitchColors={{ primary: "#ff00ff", secondary: "#00ffcc" }}
>
Purple Glitch
</GlitchButton>Ghost Variant Without Glitch
<GlitchButton glitch={false} variant="ghost">
No Glitch Ghost
</GlitchButton>Submit Button With Faster Glitch
<GlitchButton
type="submit"
glitchInterval={1500}
glitchDuration={0.05}
>
Fast Glitch Submit
</GlitchButton>Disabled State
<GlitchButton disabled>
Disabled Glitch
</GlitchButton>Custom Styles With Tailwind
<GlitchButton className="bg-gradient-to-r from-indigo-500 to-purple-600 border-none">
Gradient Glitch
</GlitchButton>