如何在 Elementor 中添加动画按钮
您需要 Elementor 和 WordPress。org 的免费主插件。
- 检查创意按钮是否打开 主插件、小部件.
- 在 Elementor 编辑器中,搜索 创意按钮 并将其拖到页面上。
- 选择效果 按钮效果 并悬停按钮以预览它。
- 键入按钮文本、替代按钮文本和链接 URL。
- 添加图标并选择"之前"或"之后"。
- 在"样式"选项卡中,设置填充、边框半径以及不同的"普通"和"悬停"颜色,因此动画很容易看到。
如需使用工具提示和显示动画等扩展进行更长的演练,请阅读 如何创建元素动画按钮。每个设置都在 创意按钮小部件设置.
21 悬停效果:6 免费,15 带 Pro
每个名字都 按钮效果 是不同的CSS悬停动画,例如滑入的背景,围绕按钮绘制的边框或交换到第二条消息的文本默认,薇诺娜,乌贾拉克,韦拉,塔玛亚和雷恩是免费的皮帕鲁克,莫玛,伊西,艾伦,萨基,瓦帕莎,尼娜,纳努克,努卡,安蒂曼,伊策尔,奈拉,奎德尔,萨克尼特和希科巴需要Pro。悬停画布上的按钮来预览每一个。
- 按钮对齐和按钮文本对齐,按设备设置。
- 使用分层背景的效果的额外前后背景颜色。
- 动画速度由每个效果固定,没有过渡时长设置。
按钮文本、替代文本、图标和样式
设置 按钮文本 和一个 链接网址 用通常的新选项卡和 nofollow 选项。除默认值之外的每个效果都显示一个 替代按钮文本 悬停消息的字段。添加一个 图标 带图标间距的文本之前或之后。在 按钮样式、设置宽度、排版、按钮填充、边框、边框半径、框阴影和图标大小,然后选择文本、背景和图标颜色用于普通和悬停。
- “开始”改为“悬停时自由”。
- 文本后面的箭头图标显示方向。
- 圆形药丸按钮,其边框在悬停时会改变颜色。
Elementor 按钮与主插件创意按钮
免费的 Elementor Button 小部件已经有悬停动画。这是每个适合的地方。
| 特点 | 元素按钮 | 主插件创意按钮 |
|---|---|---|
| 价格 | 在元素器中免费 | 6 个效果免费,21 个使用 Pro |
| 悬停动画 | Elementor Hover 动画列表,例如 Grow、Pulse、Bob 和 Wobble | 名为 CSS 效果,具有滑动背景、边框和分层颜色 |
| 悬停上的文本交换 | 否 | 替代按钮文本 |
| 背景 | 正常和悬停的经典或渐变 | 纯色,加上某些效果上的前后颜色 |
| 过渡速度 | 过渡持续时间设置 | 由每个效果修复 |
| 图标 | 之前或之后,有间距 | 之前或之后,有间距、尺寸和悬停颜色 |
Elementor 按钮进行渐变、自定义过渡速度或简单的增长或脉冲使用。当您想要背景扫描或文本交换而无需自定义 CSS 时,请使用 Creative 按钮。有关动画文本链接,请参阅 创意链接.
创意按钮常见问题
了解用户对创意按钮询问最多的查询,并在一个地方找到答案。
我可以改变悬停动画的速度吗?
Not in panel。每个效果都有自己的时序,你可以在按钮上用自定义CSS进行更改,或者使用元素器按钮小部件,它有一个过渡持续时间设置。
这与 Elementor Button 悬停动画有何不同?
Elementor按钮移动整个按钮,例如增长或脉冲。创意按钮效果使按钮内部动画化,例如背景滑入或文本更改为您的替代按钮文本。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
