Creating a Button Hover Effect

This tutorial demonstrates how to use custom components to create a smooth hover (mouse-over) animation for buttons.

Prerequisites

• Basic layer manipulation skills
• Understanding of component fundamentals
• Familiarity with the properties panel layout

Step-by-Step Guide

Step 1: Create a Button Component

1. Select the button layer, right-click, and choose “Create Component”.
2. Enter a component name and double-click to open the component editor.

Step 2: Add a Hover Variant

1. Inside the component editor, select the root node.
2. Click “Add Hover Variant.”

Step 3: Create a Hover Text Element

1. Duplicate the text component (Ctrl+D / Cmd+D).
2. Set the new text’s position mode to Absolute Positioning.

3. Adjust the Top value so that the text sits outside the blue background area.

   

Step 4: Define the Hover Animation

1. Select the text element inside the Hover variant.
2. In the right-hand panel, click “+ Add Property.”
3. Choose Y-axis Offset.
4. Set the value to 200%.

Step 5: Fine-Tune Text Position

1. Select the lower text component.
2. Adjust its Top value to 17px.

Step 6: Hide Overflow Content

1. Select the Default root component.
2. In the properties panel, locate the Overflow setting.
3. Set it to Hidden.

Step 7: Preview the Effect

You can now preview the hover effect in action. When users hover over the button, the text smoothly transitions with an animated slide.

Advanced Notes

Once you’ve mastered button hover effects, you can apply the same principles to other components such as cards, navigation items, and more.

Component Property Inheritance Rules

• Unmodified properties: Attributes from the Primary component are inherited by all variants (e.g., Overflow: Hidden).
• Modified properties: If a property is changed in a variant, updates in the Primary component won’t override it.
• Reset properties: Properties that differ from the Primary show a blue indicator. Right-click the property and select “Reset” to restore consistency.