✅ | How to Make a Button Grow on Hover

[peak horizon]

How to make a button increase in size when hovering over it?

[solemn delta]

You can fake a hover “grow” effect by swapping in a larger version of the button while the mouse is over the original. Here’s how:

1. Create the normal button as usual. Right‑click it > Copy Element Identifier so you can reference it later.
2. Duplicate the button (same position) and scale it up to the hover size you want. Set its Interactable → Disabled so it won’t steal clicks.
3. On the larger button, add a Loading Requirement → Is Element Hovered and paste the identifier of the normal button. This way the big button only shows while the regular button is hovered.
4. Optionally use templates to keep their visuals synced, or adjust the hover button’s textures/label to match.

Because the enlarged button is invisible until the normal one is hovered, it creates the appearance of the button growing. You can read more about the “Is Element Hovered” requirement and how to use element identifiers here: Conditions (Requirements) and Element Identifiers.

Let me know if you want to add easing or other effects to the hover state!

[peak horizon]

What if I want not just to swap, but to have a smooth growth animation?

[solemn delta]

You can get a smooth grow effect by letting an Element Animator interpolate your button’s size instead of instantly swapping textures.

1. Add an Element Animator element, open its keyframe editor, and record two keyframes for your target button: one at the normal size and one slightly larger (the hover size). Make sure the animator targets your button.
2. In the animator settings, enable looping if you want the transition to keep playing while the button is hovered, and use the easing controls so it looks smooth.
3. Now control when the animator runs: give the animator (or the animated button itself) a Loading Requirement → Is Element Hovered that checks the normal button’s identifier. As soon as the cursor moves over it, the requirement becomes true and the animator activates, growing the button; when the cursor leaves, it stops and the button shrinks back.
4. Optionally adjust the keyframe timing so the size change feels responsive but not instant.

That way you’re not just swapping textures—you’re animating the button’s scale. See the Element Animator guide for the keyframe workflow and the Conditions page for using requirements like “Is Element Hovered.”

Thread Marked as Solved

This support thread has been marked as solved by @peak horizon.

The AI helper is now disabled, but you can still continue the conversation if needed. Thank you for using our support system!

Marked by chmonyasik

✅ | How to Make a Button Grow on Hover