如何为Input按钮添加从中心向外展开的底部边框悬停动画？

嘿，我之前刚好折腾过这个效果，给你分享个纯CSS的解决方案，完全能满足你的需求，而且专门针对按钮元素设计的～

核心思路 #

直接给按钮的border-bottom做动画很难实现从中心展开的效果，所以我们可以用伪元素来模拟底部边框：

• 给按钮设置相对定位，作为伪元素的容器
• 用::after伪元素创建一个初始宽度为0的“边框条”，定位在按钮底部中心位置
• 当鼠标悬停时，把伪元素的宽度设为100%，配合过渡动画，就能实现从中心向左右两侧展开的效果

完整代码示例 #

<input type="button" value="点击我" class="hover-border-btn">

.hover-border-btn {
  /* 基础样式，可根据你的需求调整 */
  padding: 8px 16px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 14px;
  /* 关键：设置相对定位，让伪元素可以基于它定位 */
  position: relative;
}

.hover-border-btn::after {
  content: "";
  /* 伪元素定位：底部居中 */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 初始状态：宽度为0，高度就是边框的厚度 */
  width: 0;
  height: 2px;
  background-color: #2196F3; /* 边框颜色，可自定义 */
  /* 过渡动画，控制展开的速度 */
  transition: width 0.3s ease;
}

.hover-border-btn:hover::after {
  /* 悬停时宽度变为100%，实现从中心向两侧展开 */
  width: 100%;
}

代码解释 #

• position: relative：让按钮成为伪元素的定位上下文，确保伪元素不会跑出去
• left: 50% + transform: translateX(-50%)：这是让元素水平居中的经典写法，保证伪元素初始在按钮底部正中间
• transition: width 0.3s ease：给宽度变化添加平滑过渡，你可以调整0.3s来改变动画速度，ease是缓动效果，也可以换成linear等其他值
• 伪元素的height就是你想要的边框厚度，颜色也可以随便改

这个方法对<input type="button">、<button>标签都适用，而且不会影响按钮本身的其他样式，亲测有效哦～

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