What's New and How to Use
Apply a hover effect
Page builder -> Select a button on the canvas.
Open the Animation tab in the sidebar -> Hover Animation
Pick 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 Center, Shadow, Glow, Box Shadow Outset.
Preview before you commit
Hover an effect card and it plays on the selected button on the canvas, so you can compare options side by side.
Tune the effect - every effect exposes Duration (0.1–3s), Delay (0–5s) and Easing (Linear, Ease-in, Ease-out, Ease-in-out). Beyond that, the panel shows only the controls that apply to the effect you picked:
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 Center Border Colour, Thickness (1–10px)
Shadow Shadow, Glow, Box Shadow OutsetShadow Colour, Blur (0–50px), Spread (0–50px)
Every effect ships with brand-appropriate defaults, so it looks right the moment you pick it, adjusting is optional.
It behaves correctly out of the box - hover is automatically switched off on touch devices and screens under 1024px, so mobile visitors never land in a stuck hover state. If a button has an entrance animation, hover waits until that entrance has finished before it becomes active. Buttons that appear more than once on a page — sticky bars, navigation clones — animate identically to the original.
Impact
- Per-button micro-interactions from the sidebar, no CSS knowledge needed.
- More clickable-feeling CTAs, which is where hover states earn their keep.
- Effect-specific controls mean you only see settings that do something - no guessing which knob applies.
- Cleaner published pages: hover settings are applied as styling rather than leaking into page markup.
- Entrance animations on the canvas also got steadier as part of this work - they no longer replay every time a component remounts (drag and drop, device switch, edit), and they wait until the element is actually on screen instead of flashing early.
Where to Find It
Page Builder → Select a button → Animation tab (sidebar) → Hover Animation
Effect parameters appear in the Adjust panel below the effect grid, once an effect is selected.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article