Animation How-To: Button Shape Hover Effect

✨ Draw website visitors' attention to the buttons and increase conversions with interactive animation. See how to create the button shape hover effect with Tilda's Zero Block web design editor.

1. In Zero Block, create two button options: Default and hover state. Place the hover state of the button as the top layer.

2. Highlight the button in the hover state and add Step-by-Step Animation.

3. Set up animation:
Event — on Scroll
Step 1 — Duration 0; Opacity 0%
Step 2 — Duration 0.3; Opacity 100%

4. Done!
Publish the page.

Tip: The hover effect can also be applied to other elements, such as text, images, and cards.

See the step-by-step animated guide on Instagram