CSS 如何实现按钮蛇形边框效果？

Question

CSS 如何实现按钮蛇形边框效果？

仓乃文 · Accepted Answer

蛇形边框是边框光效沿按钮边缘流动的动画效果，通过绝对定位的伪元素 + 渐变 + 动画实现。

```css
.snake-btn {
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
  padding: 12px 30px;
  border: none;
  cursor: pointer;
}

.snake-btn::before {
  content: ";
  position: absolute;
  top: -2px;
  left: -100%;
  width: 100%;
  height: calc(100% + 4px);
  background: linear-gradient(90deg, transparent, #0ff, transparent);
  transition: left 0.5s ease;
}

.snake-btn:hover::before {
  left: 100%;
}
```

补充说明：
- 伪元素使用渐变模拟光条，通过 left 位移实现流动
- overflow: hidden 裁剪溢出部分，只显示按钮区域内的光效
- 可改为绕边框旋转：用 4 个伪元素分别处理上下左右四边
- 适合 CTA 按钮、登录按钮等需要吸引注意力的场景