MOTION EFFECT
流动边框按钮Moving Border
一个亮点沿按钮轮廓跑圈的按钮。Aceternity UI 的代表组件，比渐变按钮更有科技感，常用于首屏主 CTA。
效果预览
适合用在哪
AI / 开发者产品的主 CTA、需要强烈吸引点击的按钮、暗色主题下的次要按钮。
容易踩的坑
- 移动边框盖住了默认焦点轮廓，键盘用户 Tab 到按钮时看不到焦点。
- 浅色背景下流动亮点与底色对比不足，动效几乎不可见。
- mask-composite 在旧版 Safari 需要 -webkit- 前缀，漏写会露出整块渐变。
设计提示词 · Prompt
流动边框按钮（Moving Border）：按钮 position:relative、圆角 999px、overflow:hidden。内层放一个 absolute inset:0 的环形渐变（conic-gradient 从透明到主色再到透明），rotate 线性 2.6s 无限循环；用 mask + mask-composite:exclude 把中间挖空，只留 1.5px 描边；再叠一层 inset:1.5px 的深色实心圆角块作为按钮底色，文字放最上层。整体高度 40-44px，字重 600。
Moving Border: the button is position:relative, border-radius 999px, overflow:hidden. Inside, an absolute inset:0 ring gradient (conic-gradient from transparent to the primary color and back to transparent) rotates linearly over 2.6s, infinite; use mask + mask-composite:exclude to hollow out the middle, leaving only a 1.5px stroke. Stack a dark solid rounded block at inset:1.5px as the button fill, with the text on the top layer. Overall height 40-44px, font weight 600.
常见搭配
同一页面里经常和「流动边框按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <button class="m-mvborder"><em>Moving Border</em></button> </div>