Hover animations for buttons

Buttons in EveryCatch can now respond visually when someone hovers over them. You can choose from 21 built-in hover effects and customize details like color, size, distance, and timing directly in the sidebar, without writing any custom CSS.

Problem / opportunity

Previously, button hover options were very limited. You only had a couple of basic movement effects and there was no way to fine-tune how they behaved. If you wanted more engaging micro-interactions, you had to write and maintain custom CSS, which was challenging for many users and hard to keep consistent across templates. Because hover states help calls to action feel responsive and clickable, this created a noticeable gap in the page builder.

What changed and how to use it

1. You now have 21 new hover effects you can apply instantly, organized into six customizable categories

• Scale: Grow, Shrink, Pulse, Bounce In
• Rotation: Rotate, Skew Forward
• Movement: Float, Wobble Horizontal, Buzz
• Background: Fade, Sweep To Right, Sweep To Bottom, Radial In, Bounce To Top
• Border: Ripple Out, Outline In, Underline From Center
• Shadow: Shadow, Glow, Box Shadow Outset

1. Live canvas previews: Hover over any effect card in the sidebar to see the animation play on your button in the canvas before you apply it.
2. Contextual fine-tuning controls: Every effect includes core timing controls (Duration: 0.1–3s, Delay: 0–5s, Easing: Linear, Ease-in, Ease-out, Ease-in-out). You only see the extra controls that are relevant to the specific effect you selected.

• Scale controls: Scale factor from 0.5x to 2x
• Rotation controls: Angle from -180° to 180°
• Movement controls: Distance from 0 to 50
• Background / border controls: Fill color, border color, and thickness from 1px to 10px
• Shadow controls: Shadow color, blur from 0 to 50px, and spread from 0 to 50px

1. Smart device and state handling

• Mobile-safe: Hover states automatically turn off on touch devices and on screen widths below 1024px so hover effects do not get stuck.
• Sequenced with entrance animations: If a button has an entrance animation, the hover effect only starts working after the entrance animation has fully finished.
• Replicated elements: Clones, sticky bar buttons, and navigation duplicates automatically inherit and match the hover behavior of the original button.

1. Steadier canvas animations: Entrance animations no longer replay when components remount during drag-and-drop or device switching, and they wait until elements are visible on the screen before playing.

How to use it

1. Select any button on the builder canvas.
2. Open the Animation tab in the sidebar and go to Hover Animation.
3. Hover over any effect card to preview how it looks on the selected button.
4. Click an effect to apply it.
5. Optional: Adjust timing or specific settings like color, scale, or distance in the Adjust panel below the effect grid.

Impact

1. No CSS knowledge needed: Create polished micro-interactions directly from the sidebar controls.
2. Higher CTA engagement: Make buttons feel responsive and interactive to encourage more clicks.
3. Clutter-free interface: Contextual controls keep the sidebar focused on only the options that apply to your chosen effect.
4. Cleaner markup: Hover settings are applied as streamlined CSS styling so your published pages stay lightweight.

Where to find it

Go to Page Builder → select a button → open the Animation tab in the sidebar → Hover Animation.

Effect settings and parameters appear in the Adjust panel directly below the effect grid.