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

Top

Bottom

Left

Right

Diagonal

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

Visual Configurator

Documentation

GETTING STARTED

MENU ANIMATIONS

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

SURECART

BUTTONS

TRANSITION PAGES

Hover fill

Preview

Quick Setup

Advanced configuration

We're here to help

Contact Support