如何用HTML和CSS实现无需交互的按钮背景动态填充动画？

完全可以用CSS伪元素配合动画实现这个自动填充效果，不需要JavaScript或SVG，下面是具体实现方案：

HTML 结构 #

<button class="auto-fill-btn">自动填充按钮</button>

CSS 样式 #

.auto-fill-btn {
  /* 基础按钮样式 */
  position: relative;
  padding: 12px 36px;
  font-size: 16px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  font-weight: 500;
  overflow: hidden; /* 限制伪元素在按钮范围内 */
  cursor: pointer;
}

.auto-fill-btn::before {
  /* 用作填充背景的伪元素 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #3498db;
  z-index: -1; /* 让背景层在文字下方 */
  animation: fill-bg 2s forwards; /* forwards让动画停在结束状态 */
}

/* 定义填充动画 */
@keyframes fill-bg {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

效果说明 #

• 用::before伪元素作为按钮的背景层，初始宽度设为0，通过@keyframes定义从0到100%宽度的动画，实现自动填充效果
• position: relative和overflow: hidden确保伪元素不会超出按钮边界
• 如果需要调整填充方向：
  • 从右到左填充：把left: 0改成right: 0，动画逻辑不变
  • 从上到下填充：把width换成height，left:0换成top:0，动画里修改height从0到100%
• 调整animation里的时间（比如把2s改成1.5s）可以控制填充速度

扩展调整 #

• 替换background-color和border的颜色值，就能自定义填充和边框色调
• 如果需要循环播放填充动画，把forwards换成infinite即可

内容的提问来源于stack exchange，提问作者amir moradi