Documentation
v1.8
GETTING STARTED
DYNAMIC ISLAND
Library
Button effects
Ripple effect
The Ripple Effect is a visually striking hover interaction for buttons and clickable elements. It creates a dynamic ripple animation that radiates outward from the mouse pointer, mimicking the effect of a drop hitting the surface.
Preview
Quick Setup
data-ripple
Required
Activates the Ripple Effect on the element.
Advanced configuration
data-ripple-size
Optional
Specifies the size of the ripple.
Default: 120
data-ripple-color
Optional
Defines the color of the ripple animation.
Default: rgba(255, 255, 255, 0.7)
data-ripple-duration
Optional
Sets the duration of the ripple fade-in and fade-out effect (in seconds).
Default: 0.6
data-ripple-pulse-speed
Optional
Adjusts the speed of the subtle pulsing effect of the ripple animation.
Default: 0.05
data-ripple-pulse-intensity
Optional
Defines the intensity of the pulsing animation. Higher values create more pronounced pulses.
Default: 0.05
data-ripple-invert-text
Optional
Toggles the text color inversion within the ripple area for better visibility. Values: true or false.
Default: false
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours