Ripple Button
Click-origin radial ripple expands from the exact cursor position.
Component Showcase
Ripple Button
Click-origin radial ripple expands from the exact cursor position.
GSAPRipple
Interactive Playground
Adjust sliders and values to preview changes in real-time
label
The text content displayed in the center of the button.
duration
Speed (seconds) for ripple fade out and scale animation.
rippleColor
CSS color definition applied to the expanding circular ripple.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Click for ripple" | The text content displayed in the center of the button. |
| duration | number | 0.7 | Speed (seconds) for ripple fade out and scale animation. |
| rippleColor | string | "rgba(127, 255, 94, 0.25)" | CSS color definition applied to the expanding circular ripple. |