按钮Hover时圆角边框动画异常：左右边框显示问题求助

问题核心在于两个关键点：一是<span>未设置相对定位，导致其伪元素定位基准错误；二是左右边框伪元素的起始位置未与上下边框衔接，再加上按钮的圆角和overflow: hidden属性，最终导致左右边框无法正常显示。

以下是修正后的完整代码：

CSS 代码 #

button {
  position: relative;
  border-radius: 100px;
  overflow: hidden;
  padding: 8px 20px;
  border: none;
  background: #1976d2;
  color: #fff;
  cursor: pointer;
}

button .extended-fab-button__text {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

button::before,
button::after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;
  left: 2px;
  right: 2px;
}

span::before,
span::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;
  top: 2px;
  bottom: 2px;
}

button:hover::before,
button:hover::after {
  width: calc(100% - 4px);
}

button:hover span::before,
button:hover span::after {
  height: calc(100% - 4px);
}

.btn-3::after {
  left: 2px;
  bottom: 0;
  transition-delay: 0.6s;
}

.btn-3 span::after {
  transition-delay: 0.4s;
  right: 0;
  bottom: 2px;
}

.btn-3::before {
  right: 2px;
  top: 0;
  transition-delay: 0.2s;
}

.btn-3 span::before {
  transition-delay: 0s;
  left: 0;
  top: 2px;
}

.btn-3:hover::after {
  transition-delay: 0s;
}

.btn-3:hover span::after {
  transition-delay: 0.2s;
}

.btn-3:hover::before {
  transition-delay: 0.4s;
}

.btn-3:hover span::before {
  transition-delay: 0.6s;
}

HTML 代码 #

<button (click)="openDialog()" 
        class="extended-fab-button btn-3" 
        mat-fab color="primary">
  <span class="extended-fab-button__text">Test File</span>
</button>

修改说明： #

• 给<span>添加position: relative和宽高占满按钮的样式，确保其伪元素的定位基准正确，能覆盖按钮整个区域。
• 调整上下边框伪元素的left/right偏移为2px（与边框宽度一致），左右边框伪元素的top/bottom偏移为2px，让边框在圆角处完美衔接，避免出现缺口。
• 将hover时的宽高改为calc(100% - 4px)，对应偏移量，确保边框刚好填满按钮的圆角区域。
• 补充按钮基础样式，避免与mat-fab默认样式冲突。

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