实现按钮Hover时边框从无到完整圆角矩形的动画效果

先修正原代码的问题 #

原代码里的.btn :hover多了空格，这会导致选择器匹配按钮内部的后代元素，而非按钮本身的hover状态，正确写法是.btn:hover。另外原代码没有添加过渡属性，状态切换是瞬间的，没有动画效果。

方案一：基础平滑过渡动画 #

适合实现边框、圆角、背景色的平滑过渡，满足基础需求：

<html>
<body>
  <button class="btn">Hi!there.</button>
</body>
</html>

.btn {
  border: 1.5px solid transparent; /* 初始边框透明，避免hover时元素尺寸跳动 */
  background-color: transparent;
  height: 40px; /* 调高高度让效果更明显 */
  padding: 0 16px;
  border-radius: 0; /* 初始无圆角 */
  transition: all 0.3s ease; /* 所有属性应用过渡动画，时长0.3秒 */
  cursor: pointer;
}

.btn:hover {
  border-radius: 6px;
  border-color: red;
  background-color: purple;
  color: white; /* 增加文字颜色对比，提升可读性 */
}

代码说明 #

• 初始用透明边框占位，保证hover前后元素布局稳定，不会出现跳动
• transition 属性定义动画规则，all 表示所有变化的属性都执行过渡，ease 是自然的缓动效果
• hover时修改边框颜色、圆角和背景色，所有变化都会平滑过渡完成

方案二：边框逐步绘制动画（进阶） #

如果需要边框从无到有逐步显现的精细动画效果，可以用伪元素配合裁剪属性实现：

<html>
<body>
  <button class="btn">Hi!there.</button>
</body>
</html>

.btn {
  position: relative;
  background-color: transparent;
  height: 40px;
  padding: 0 16px;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

/* 用伪元素创建边框层 */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1.5px solid red;
  border-radius: 6px;
  /* 初始状态：裁剪整个伪元素，边框完全隐藏 */
  clip-path: inset(100% 100% 100% 100%);
  transition: clip-path 0.5s ease;
}

.btn:hover::before {
  /* hover时取消裁剪，边框逐步显现 */
  clip-path: inset(0 0 0 0);
}

.btn:hover {
  background-color: purple;
  color: white;
  transition: background-color 0.3s ease, color 0.3s ease;
}

代码说明 #

• 伪元素::before作为独立的边框容器，初始通过clip-path将其完全裁剪隐藏
• hover时修改clip-path参数，让伪元素逐步显示，实现边框从无到有的绘制动画
• 按钮背景色和文字颜色的变化单独设置过渡，保证整体动画同步自然

内容的提问来源于stack exchange，提问作者Lemon Dhakal