Hover animations for button in Clixio Funnel and Website builder

Apply a Hover Effect

Page Builder → Select a button on the canvas.

Open the Animation tab in the sidebar → Hover Animation.

Choose from 20 effects: 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 Centre, Shadow, Glow, Box Shadow Outset.

Hover over an effect card to see it play on the selected button on the canvas, allowing you to compare options side by side.

Tune the Effect – every effect offers controls for Duration (0.1–3s), Delay (0–5s), and Easing (Linear, Ease-in, Ease-out, Ease-in-out). Additionally, the panel displays only the controls relevant to the effect you’ve chosen:

Effect Group Effects Controls

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

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

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

Background Fade, Sweep To Right, Sweep To Bottom, Radial In, Bounce To Top Fill Colour

Border Ripple Out, Outline In, Underline From Centre Border Colour, Thickness (1–10px)

Shadow Shadow, Glow, Box Shadow Outset Shadow Colour, Blur (0–50px), Spread (0–50px)

Every effect comes with brand-appropriate defaults, ensuring it looks right immediately. Adjustments are optional.

The effects behave correctly by default; hover is automatically disabled on touch devices and screens smaller than 1024px, preventing mobile visitors from encountering a stuck hover state. If a button has an entrance animation, the hover effect will only activate once the entrance animation has completed. Duplicate buttons on a page—such as sticky bars or navigation clones—will animate identically to the original.

• Per-button micro-interactions available in the sidebar, requiring no CSS knowledge.
• More clickable-feeling CTAs, capitalising on the value of hover states.
• Effect-specific controls ensure you only see relevant settings—no guessing involved.
• Cleaner published pages: hover settings are applied as styling rather than being embedded in page markup.
• Entrance animations on the canvas have also improved—they no longer replay each time a component is remounted (e.g. drag and drop, device switch, or edit) and will now wait until the element is actually on screen, preventing any early flashes.

Page Builder → Select a button → Animation tab (sidebar) → Hover Animation.

Effect parameters will appear in the Adjust panel below the effect grid once an effect is selected.