CSS实现按钮左上到右下边框变色hover动画异常求助

你的代码存在3个核心问题，导致右侧、底部边框动画异常：

• 定位上下文错误：你将position: relative设置在了外层容器上，按钮元素本身没有设置相对定位，导致::before/::after伪元素的定位参照系是外层容器，而非按钮自身，位置完全偏移
• ::after伪元素初始定位错误：你给::after设置了top: 0; left: 0，当宽高从0增长到100%时，伪元素会从左上角向外扩张，无法沿着右侧、底部边框延伸
• 过渡时序逻辑错误：::before的width和height属性同时执行过渡，会导致顶边、左边边框同时绘制，不符合顺序延伸的预期；::after的过渡属性顺序和延迟设置不匹配边框绘制逻辑，无法实现连续延伸效果

CSS代码 #

.hover-effect-button-container-yellow {
  max-width: 150px;
  background: #000; /* 演示用背景，可根据页面实际样式调整 */
}

.hover-effect-button-yellow {
  position: relative; /* 给按钮自身添加定位上下文，伪元素将参照按钮定位 */
  text-align: center;
  border: 1px solid #fff;
  font-family: "Muli", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 25.5px;
  padding: 10px 24px 10px 25px;
}

.hover-effect-button-yellow a {
  position: relative;
  z-index: 2; /* 保证链接文字在伪元素上层，不会被遮挡 */
  color: #fff;
  text-decoration: none;
}

.hover-effect-button-yellow::before,
.hover-effect-button-yellow::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

/* ::before负责顶边、左边边框动画，初始定位在按钮左上角 */
.hover-effect-button-yellow::before {
  border-top: 1px solid red;
  border-left: 1px solid red;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

/* ::after负责右边、底部边框动画，初始定位在按钮右上角 */
.hover-effect-button-yellow::after {
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
}

/* hover动画时序：顶边从左到右→左边从上到下→右边从上到下→底边从右到左，形成顺时针连续绘制效果 */
.hover-effect-button-yellow:hover::before {
  width: 100%;
  height: 100%;
  transition: width 0.5s ease-out, height 0.5s ease-out 0.5s;
}

.hover-effect-button-yellow:hover::after {
  width: 100%;
  height: 100%;
  transition: height 0.5s ease-out 1s, width 0.5s ease-out 1.5s;
}

如果你只需要动画到右下角（即顶边、右边绘制完成就停止），可以删掉::after的width过渡规则，调整对应延迟时间即可。

HTML代码 #

<div class="hover-effect-button-container-yellow">
    <div class="hover-effect-button-yellow"> 
        <a href="#">CLICK HERE</a>
    </div>
</div>

修复后默认动画执行顺序为：

1. 0-0.5s：顶部边框从左上角开始，向右延伸至右上角
2. 0.5-1s：左侧边框从左上角开始，向下延伸至左下角
3. 1-1.5s：右侧边框从右上角开始，向下延伸至右下角
4. 1.5-2s：底部边框从右下角开始，向左延伸至左下角
   你可以根据需要调整过渡时长和延迟数值，匹配目标站点的动画速度。

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