Documentation
v.1.7
GETTING STARTED
DYNAMIC ISLAND
Library
Button effects
Essence effect
The Essence Effect introduces a vibrant, dynamic gradient animation that enhances the visual appeal of buttons or other interactive elements.
Preview
Quick Setup
data-essence
Required
Activates the Essence Effect on the element.
Advanced configuration
data-essence-color1
Optional
Specifies the first color in the gradient animation.
Default: #3498db
data-essence-color2
Optional
Specifies the second color in the gradient animation.
Default: #2ecc71
data-essence-color3
Optional
Specifies the third color in the gradient animation.
Default: #e74c3c
data-essence-duration
Optional
Defines the duration of the gradient animation cycle (in seconds).
Default: 3
data-essence-speed
Optional
Controls the speed of the animation when the element is hovered over (in seconds).
Default: 2
data-essence-direction
Optional
Specifies the angle of the gradient animation.
Default: 90
data-essence-intensity
Optional
Adjusts the opacity of the gradient animation, controlling its visual intensity.
Default: 1
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