需要创建具有悬停效果的按钮 Elementor ?
如果是这样，请坐在这辆宏伟的巴士上，因为我们今天将实现的目标在以下视频中：
让我们创建一个页面，然后修改它 Elementor，然后选择一个 2 列结构。 在面板中，让我们通过选择来修改新创建的部分 最小高度 在球场上 高度 并立即 最小高度 让我们点击 VH 然后将光标设置为 100.
在标签中 样式 让我们将背景颜色更改为#070e39。
在第一列中，让我们放置一个 Button 小部件，通过键入修改其文本 查看详情 让我们把它向右对齐
在标签中 样式 让我们修改它 活版印刷 通过改变大小 15, 改造 河畔 大写 et 字母间距 河畔 1.1
在标签中 先进, 全部修改 利润率 河畔 20 并在该部分 自定义CSS，让我们粘贴以下为按钮添加渐变的代码：
选择器{
--btn-宽度：180px；
--btn-高度：50px；
--btn-背景：#0e1538；
--左渐变：#F803F8；
--右梯度：#03F2FD；
}
选择器一个{
相对位置：;
宽度：var（--btn-宽度）；
高度：var（--btn-高度）；
}
选择器 a：之前，
选择器 a：在 { 之后
快乐的： ”;
位置：绝对;
插图：0；
过渡：0.5s；
}
选择器 a: nth-child (1): before,
选择器 a: nth-child (1): after {
背景：linear-gradient（45度，var（--left-gradient），var（--btn-background），var（--btn-background），var（--right-gradient））；
}
选择器a：悬停：在{之前
插图：-3px；
}
选择器a：悬停：在{之后
插图：-3px；
过滤器：模糊（10px）；
}
选择一个跨度{
位置：绝对;
顶部：0;
左：0;
宽度：100％;
身高：100％;
背景：var（--btn-background）；
z-index：10;
显示：flex;
证明内容：中心；
align-items：居中;
溢出：隐藏;
}
现在，如果您将鼠标悬停在按钮上，您会发现壮观的效果。
要在按钮上添加闪亮的玻璃效果，我们还要粘贴以下代码：
/*闪亮玻璃效果*/
选择一个 span :: before {
快乐的： ”;
位置：绝对;
顶部：0;
左：-50%；
宽度：100％;
身高：100％;
背景：RGBA（255,255,255,0.075）；
变换：倾斜（160度）；
}
您观察到一种新效果，它为按钮带来了更多的光。
另请参阅： 如何使用 Elementor 创建团队成员部分
现在让我们复制此按钮并将其粘贴到第二列中。 让我们将按钮对齐更改为左对齐并将文本更改为 查看更多.
现在你只需要 发布 您的作品或预览它。
这是创建的 2 个漂亮的按钮。
立即获取Elementor Pro！
结论
所以 ！ 本教程就是这样，向您展示如何使用 页面生成器 Elementor. 如果您对如何到达那里有任何疑虑，请告知我们 评论.
但是，您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
