Documentation
v2.0
GETTING STARTED
MENU ANIMATIONS
ANIMATED TEXT
TRANSITION PAGES
Library
Button effects
Hover fill
The Hover Fill effect creates an interactive and visually engaging animation for buttons or any clickable elements. When the user hovers over a button, a dynamic filling animation seamlessly flows across the button, giving it a stylish and modern look.
Preview
Quick Setup
data-hover-fill
Required
Activates the Hover Fill effect on the element.
Advanced configuration
data-fill-color
Optional
Sets the background color of the filling animation during the hover effect.
Default: #fff
data-text-color
Optional
Specifies the text color when the button is hovered over.
Default: auto
data-duration
Optional
Determines the duration of the filling animation. You can adjust the speed of the animation by increasing or decreasing this value.
Default: 0.3s
data-direction
Optional
Controls the direction of the filling animation. The available directions are: top, right, left, bottom & diagonal.
Default: left
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