实现带图标CSS按钮悬停过渡：右侧箭头背景向左扩展

直接设置width:120%会破坏flex布局的空间分配逻辑，导致扩展效果异常。我们可以通过伪元素+过渡动画实现黑色背景向左扩展的视觉效果，同时保留原有布局结构：

修改后的完整代码 #

.css-button {
  width: 60%;
  font-size: 16px;
  border-radius: 5px;
  border: solid 3px #000000;
  cursor: pointer;
  position: relative;
  background: white;
  display: flex;
  align-items: center;
  padding: 0;
}

.css-button-text {
  flex: 1; /* 让文本区域占满按钮剩余空间，固定箭头区域位置 */
  padding-left: 10px;
}

.css-button:hover {
  background: red;
}

.css-button-icon {
  position: relative;
  border-left: 1px solid #ffffff29;
  padding: 10px 12px;
  background: #000000;
  color: #fff;
  transition: color 0.3s ease; /* 保留文字颜色过渡效果 */
}

/* 用伪元素实现背景向左扩展 */
.css-button-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #000;
  transition: width 0.3s ease;
  transform: translateX(-100%); /* 初始隐藏在箭头区域左侧 */
  z-index: -1; /* 让伪元素在箭头文字下方 */
}

.css-button:hover .css-button-icon {
  color: #ff0000;
}

/* 悬停时触发扩展动画 */
.css-button:hover .css-button-icon::before {
  width: 25px; /* 可根据需求调整扩展幅度 */
}

<button class="css-button">
  <span class="css-button-text">BUTTON</span>
  <span class="css-button-icon">></span>
</button>

核心逻辑说明 #

1. 固定布局结构：给.css-button-text添加flex:1，让文本区域占满按钮剩余空间，确保箭头区域始终固定在按钮右侧。
2. 伪元素模拟背景扩展：通过.css-button-icon::before创建黑色背景伪元素，初始宽度为0并隐藏在箭头左侧；悬停时修改伪元素宽度，配合过渡动画实现平滑的向左扩展效果。
3. 动画优化：给伪元素的width属性添加过渡效果，同时保留箭头文字的颜色过渡，让整体交互更自然。

你可以通过调整width:25px的值改变扩展幅度，修改transition的0.3s调整动画速度，适配你的需求。

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