元素介绍
这是一个具有动态悬停效果的交互式按钮组件。采用HTML+CSS技术栈，运用伪元素和CSS3变换实现双边框展开动画。按钮常态为透明背景配深色边框，悬停时黑色边框从两侧向中间展开并覆盖整个按钮区域，文字颜色渐变为浅色，营造流畅的视觉过渡效果。
Button按钮元素 [2524] | HTML CSS双边框展开动画按钮组件特效素材实例代码效果由HTML+CSS编写，元素所属类型为按钮特效素材，编号2524，示例主题使用白色为背景颜色，JZTHEME平台支持在线实时更改代码与背景预览，无需登录或下载，您可以在线编辑所需效果后在线复制代码，或使用任意代码编辑器如Visual Studio Code等开发工具自行编辑，该实例代码可以使用在前端、后端等任意场景。
相关推荐
-
-
-
-
-
新拟态Button按钮元素 [2306]
3,030 -
登录/注册
a'ゞ沐希
Lv1
这个双边框展开效果用伪元素实现还挺巧妙的 刚试了下在移动端点击时动画有点卡顿 是不是得加点硬件加速属性
点赞
6
2026-02-18 16:41
程序员桠豪
Lv1
这个展开动画是用伪元素的scaleX属性实现的吗？
点赞
7
2026-02-13 17:10
令狐景荣
Lv1
这个动画效果很不错，可以直接套用到项目中。不过，希望有JS版本可以控制状态。
点赞
7
2026-02-10 11:07
FSD-子聪
Lv1
这个动画有点重，建议优化下性能。另外，需要适配不同屏幕尺寸吗？
点赞
6
2026-02-08 13:55
A. 炳硕
Lv1
这种双边框展开动画做出来挺有质感的，但 hover 时文字变色会不会影响可读性
点赞
6
2026-02-04 14:37
❤令敏
Lv1
这样写会不会卡
点赞
5
2026-01-31 10:50
博主增芳
Lv1
这种动画按钮适合用在产品介绍页或者运营活动页的CTA区域可以增加交互吸引力特别是在深色背景上效果更明显
点赞
1
2026-01-26 19:14
