# 按钮 Hover 动效制作教程 | Creght 可视化文档

> 本教程将演示如何使用 自定义组件 ，为按钮制作流畅的 Hover（鼠标悬停）动效。 前置知识 掌握基本的图层操作 了解组件的基础概念 熟悉属性面板的布局 分步教程 步骤 1：创建按钮组件 选中按钮图层，右键单击并选择 “创建组件” 。…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

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

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

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

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

工具/

# 按钮 Hover 动效制作教程

本教程将演示如何使用 **自定义组件**，为按钮制作流畅的 Hover（鼠标悬停）动效。

## **前置知识**

- 掌握基本的图层操作
- 了解组件的基础概念
- 熟悉属性面板的布局

## **分步教程**

### **步骤 1：创建按钮组件**

1. 选中按钮图层，右键单击并选择 **“创建组件”**。
2. 输入组件名称，然后双击打开组件编辑器。

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

### **步骤 2：添加 Hover 变体**

1. 在组件编辑器中选中根节点。
2. 单击 **“添加 Hover 变体”**。

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

### **步骤 3：创建悬停状态的文字元素**

1. 复制文字组件（ **Ctrl+D** / **Cmd+D**）。
2. 将新文字的位置模式设置为 **绝对定位**。
3. 调整 **Top** 值，让文字位于蓝色背景区域之外。

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


### **步骤 4：设置 Hover 动画**

1. 选中 **Hover** 变体中的文字元素。
2. 在右侧面板中单击 **“\+ 添加属性”**。
3. 选择 **Y 轴偏移**。
4. 将数值设置为 **200%**。

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

### **步骤 5：微调文字位置**

1. 选中下方的文字组件。
2. 将它的 **Top** 值调整为 **17px**。

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

### **步骤 6：隐藏溢出内容**

1. 选中 **Default** 根组件。
2. 在属性面板中找到 **Overflow** 设置。
3. 将它设置为 **Hidden**。

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

### **步骤 7：预览效果**

现在可以预览 Hover 效果了。当用户将鼠标悬停在按钮上时，文字会通过平滑的滑动动画完成切换。

## **进阶说明**

掌握按钮 Hover 动效后，你还可以将相同的原理应用到卡片、导航项和其他组件中。

### **组件属性继承规则**

- **未修改的属性**： **Primary 组件** 的属性会被所有变体继承，例如 _Overflow: Hidden_。
- **已修改的属性**：如果某个属性在变体中被修改，之后对 Primary 组件中该属性的更新不会覆盖这个变体。
- **重置属性**：与 Primary 不同的属性会显示 **蓝色指示标记**。右键单击该属性并选择 **“重置”**，即可恢复一致。

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

本文目录

- [前置知识](#前置知识)
- [分步教程](#分步教程)
- [步骤 1：创建按钮组件](#步骤-1-创建按钮组件)
- [步骤 2：添加 Hover 变体](#步骤-2-添加-hover-变体)
- [步骤 3：创建悬停状态的文字元素](#步骤-3-创建悬停状态的文字元素)
- [步骤 4：设置 Hover 动画](#步骤-4-设置-hover-动画)
- [步骤 5：微调文字位置](#步骤-5-微调文字位置)
- [步骤 6：隐藏溢出内容](#步骤-6-隐藏溢出内容)
- [步骤 7：预览效果](#步骤-7-预览效果)
- [进阶说明](#进阶说明)
- [组件属性继承规则](#组件属性继承规则)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)