# Creating a Button Hover Effect | Creght Visual Documentation

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

[AI](/docs/ai/quick-create-first-website.md) [Visual](/docs/get-start.md)

Basic

- [Get to Know Creght in 2 Minutes](/docs/get-start.md)
- [How to Register for Creght](/docs/signup.md)
- [Creating a Project in Creght](/docs/create-site.md)
- [Templates](/docs/tpls.md)

Design

- [Using the Editor](/docs/editor.md)
- [Basic Operations](/docs/operating.md)
- [Layouts in Creght](/docs/layout.md)
- [Position in Creght](/docs/position.md)
- [Size in Creght](/docs/size.md)
- [Breakpoints in Creght](/docs/breakpoint.md)
- [Overlays](/docs/popover.md)
- [Components in Creght](/docs/components.md)
- [Adding Third-Party Fonts](/docs/tp-font.md)
- [Duplicate and Deep Copy](/docs/deep-copy.md)

CMS

- [CMS (Content Management System)](/docs/cms.md)
- [Importing WeChat Official Account Articles into CMS](/docs/wxmp.md)

Site Setting

- [Page Settings](/docs/page-setting.md)
- [How to Upgrade a Plan](/docs/manage-plan.md)
- [SEO Settings](/docs/seo-setting.md)
- [Small Files (Site Verification)](/docs/verification-file.md)
- [Adding a Custom Domain in Creght](/docs/custom-domain.md)
- [How to Complete ICP Filing](/docs/beian.md)
- [Server Nodes](/docs/website-node.md)
- [How to Switch Sites](/docs/pxrp79jqtnyq.md)
- [Localization](/docs/localization.md)

AI

- [About Creght AI](/docs/creght-ai.md)

Tool

- [Convert Figma Designs into Live Websites](/docs/figma-to-creght.md)
- [3 Guidelines for Responsive Figma Layouts](/docs/figma-autolayout.md)
- [Covert Figma to live website](/docs/response-site.md)
- [Figma to Responsive Website: Interactions](/docs/figma03.md)
- [Compressing Video with FFmpeg](/docs/ffmpeg.md)
- [How to Add Clarity to Your Website](/docs/clarity.md)
- [Creating a Button Hover Effect](/docs/button.md)
- [How to Build a Reusable Collapsible FAQ Panel](/docs/collapse.md)
- [Responsive Navigation Tutorial](/docs/nav.md)

Tool/

# 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.

![image.png](https://fsu.creght.com/user/3/mhZFWsmipnO__image.png)

### **Step 2: Add a Hover Variant**

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

![image.png](https://fsu.creght.com/user/3/mhZFWTqgpgb__image.png)

### **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.

![image.png](https://fsu.creght.com/user/3/micPjjvlYdC__image.png)


### **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%**.

![image.png](https://fsu.creght.com/user/3/mhZFXZryJrz__image.png)

### **Step 5: Fine-Tune Text Position**

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

![image.png](https://fsu.creght.com/user/3/mhZFYuygJoi__image.png)

### **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**.

![image.png](https://fsu.creght.com/user/3/mhZFYNPFkmZ__image.png)

### **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.

![image.png](https://fsu.creght.com/user/3/mhZFZsiKSvp__image.png)

On this page

- [Prerequisites](#prerequisites)
- [Step-by-Step Guide](#step-by-step-guide)
- [Step 1: Create a Button Component](#step-1-create-a-button-component)
- [Step 2: Add a Hover Variant](#step-2-add-a-hover-variant)
- [Step 3: Create a Hover Text Element](#step-3-create-a-hover-text-element)
- [Step 4: Define the Hover Animation](#step-4-define-the-hover-animation)
- [Step 5: Fine-Tune Text Position](#step-5-fine-tune-text-position)
- [Step 6: Hide Overflow Content](#step-6-hide-overflow-content)
- [Step 7: Preview the Effect](#step-7-preview-the-effect)
- [Advanced Notes](#advanced-notes)
- [Component Property Inheritance Rules](#component-property-inheritance-rules)

> Full page index: [/llms.txt](/llms.txt)