Hover animations for buttons in EveryCatch funnels and website builder

What’s new and how to use it

In the page builder, select a button on your canvas to get started.

In the right-hand sidebar, open the Animation tab, then choose Hover animation.

You can now pick from 20 hover effects for any button: 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.

Preview before you commit

Hover over any effect card to see it play live on the button you selected on the canvas, so you can quickly compare options side by side.

You can fine-tune each effect. Every effect includes controls for Duration (0.1–3s), Delay (0–5s), and Easing (Linear, Ease-in, Ease-out, Ease-in-out). Beyond that, the panel only shows the extra controls that are relevant to the effect you chose.

Here is how effect groups map to their controls:

Scale effects: Grow, Shrink, Pulse, Bounce In Control: Scale (0.5×–2×)

Rotation effects: Rotate, Skew Forward Control: Angle (−180° to 180°)

Movement effects: Float, Wobble Horizontal, Buzz Control: Distance (0–50)

Background effects: Fade, Sweep To Right, Sweep To Bottom, Radial In, Bounce To Top Control: Fill colour

Border effects: Ripple Out, Outline In, Underline From Center Controls: Border colour, Thickness (1–10px)

Shadow effects: Shadow, Glow, Box Shadow Outset Controls: Shadow colour, Blur (0–50px), Spread (0–50px)

Each effect comes with defaults that follow your current brand styling, so it looks consistent as soon as you select it. You only need to adjust settings if you want something more tailored.

Hover behavior also works in a safe, predictable way out of the box. Hover is automatically disabled on touch devices and on screens under 1024px, so mobile visitors never get stuck in a hover state. If a button already has an entrance animation, the hover effect waits until that entrance animation is finished before it starts responding. If the same button appears multiple times on a page, such as in sticky bars or navigation clones, every instance uses the same hover animation as the original.

Impact

• You can add polished micro-interactions to individual buttons directly from the sidebar, with no CSS knowledge required.
• Your calls to action can feel more clickable and engaging when a visitor moves their cursor over them.
• Effect-specific controls mean you only see settings that actually change the effect, so you do not have to guess which options apply.
• Published pages stay cleaner, because hover settings are stored as styling rather than bloating the page markup.
• Entrance animations on the canvas are now more stable: they do not replay every time a component remounts (for example after drag and drop, device switch, or edit), and they only trigger once the element is actually in view instead of flashing early.

Where to find it

In the page builder: select a button, open the Animation tab in the sidebar, then choose Hover animation.

Once you select an effect, its parameters appear in the Adjust panel below the effect grid, so you can tweak the behavior without leaving the same view.