Small touches on your website can make a big difference. If your buttons look flat or easy to overlook, hover effects can help them feel more interactive and encourage more clicks when someone is ready to take action.

📌 Why This Matters

Buttons are often where website visitors decide what to do next, whether that is booking, buying, calling, or filling out a form. Adding a hover effect helps draw attention to those actions without needing custom code or design experience. It also gives your pages a more polished feel while keeping the experience simple for desktop visitors.

✨ What’s New

• 20 hover effects to choose from: You can apply effects like Grow, Shrink, Pulse, Bounce In, Rotate, Float, Skew Forward, Wobble Horizontal, Buzz, Fade, Sweep To Right, Sweep To Bottom, Radial In, Bounce To Top, Ripple Out, Outline In, Underline From Center, Shadow, Glow, and Box Shadow Outset.
• Live preview before selecting: Hover over an effect option and see it play on the selected button, making it easier to compare styles before choosing one.
• Simple controls that match the effect: Adjust timing with Duration, Delay, and Easing, then fine-tune only the settings that apply, such as scale, angle, distance, fill color, border color, thickness, blur, or spread.
• Built-in defaults: Each effect starts with settings that already look good, so you can use them as-is or make small changes.
• Works properly across devices: Hover effects automatically stay off on touch devices and smaller screens, so mobile visitors do not get stuck in a hover state.
• Consistent animation behavior: If a button appears in more than one place on the page, the hover effect stays consistent, and if the button already has an entrance animation, the hover effect waits until that animation is done.

🛠️ How to Use It

1. Step 1: Open your page builder and select the button you want to edit on the page.
2. Step 2: In the sidebar, go to the Animation tab and open Hover Animation.
3. Step 3: Browse the available effects and hover over each option to preview how it looks on your button.
4. Step 4: Choose the effect you want, then adjust settings like duration, delay, easing, and any effect-specific options shown in the panel.
5. Step 5: Save your changes and test the page on desktop to make sure the button feels clear and natural.

💡 Pro Tip

Use hover effects on your most important action buttons, like booking, quote requests, or checkout, to help more visitors notice the next step and turn more page views into real sales.