如何将带动画的按钮转为纯CSS实现适配WordPress？

问题背景 #

需要给WordPress站点的所有按钮添加指定的边框动画效果，但原实现依赖SVG结构，且按钮固定180px宽度，无法适配不同长度的链接。目标是用纯CSS复刻相同效果，通过类名快速应用到现有链接/按钮上。

原效果特征：Hover时边框四条边依次绘制，同时文字轻微上移。

实现方案 #

用CSS伪元素+背景渐变模拟边框动画，通过自适应布局让按钮适配内容宽度，无需额外HTML结构。

1. HTML使用方式 #

直接给WordPress里的链接或按钮添加类名即可，无需修改原有结构：

<!-- 链接示例 -->
<a href="/" class="animated-border-btn">返回首页</a>

<!-- 按钮示例 -->
<button class="animated-border-btn">提交表单</button>

2. 完整CSS代码 #

/* 核心按钮样式 */
.animated-border-btn {
  position: relative;
  display: inline-block;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: transparent;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s ease;
}

/* 静态背景边框 */
.animated-border-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  box-sizing: border-box;
  z-index: -1;
}

/* 动画边框（四条边用渐变模拟） */
.animated-border-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  /* 初始状态：所有边隐藏 */
  background: 
    linear-gradient(#000, #000) 0 0 / 0 2px no-repeat,
    linear-gradient(#000, #000) 100% 0 / 2px 0 no-repeat,
    linear-gradient(#000, #000) 100% 100% / 0 2px no-repeat,
    linear-gradient(#000, #000) 0 100% / 2px 0 no-repeat;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Hover触发动画 */
.animated-border-btn:hover {
  color: #fff;
}

.animated-border-btn:hover::after {
  /* Hover时四条边依次展开 */
  background: 
    linear-gradient(#000, #000) 0 0 / 100% 2px no-repeat,
    linear-gradient(#000, #000) 100% 0 / 2px 100% no-repeat,
    linear-gradient(#000, #000) 100% 100% / 100% 2px no-repeat,
    linear-gradient(#000, #000) 0 100% / 2px 100% no-repeat;
}

/* 文字上移动画 */
.animated-border-btn span {
  position: relative;
  transition: transform 0.3s ease;
}

.animated-border-btn:hover span {
  transform: translateY(-2px);
}

3. 特性说明 #

• 自适应宽度：按钮宽度由内容+padding自动计算，适配任意长度的文字
• 无额外结构：纯CSS实现，不需要SVG或嵌套HTML，直接加类名就能用
• 动画还原度高：边框从右上角开始依次绘制，文字上移效果和原实现一致
• 兼容性好：支持Chrome、Firefox、Safari等现代浏览器，IE11需调整渐变写法
• 易定制：修改padding、font-size、颜色值即可快速调整按钮样式

内容的提问来源于stack exchange，提问作者Lena Shore