CSS按钮背景动画优化：实现背景水平反向退出而非垂直

AI 小北

2026-6-27

问题解决：按钮hover背景合并/移出左右拆分动画

修改后的实现代码

CSS

.bannerbuttonV1 {
  --cblack: #282828;
  --_pos: 0%; /* 控制背景位置的变量 */
  box-shadow: 0 0 0 .1em inset var(--cblack);
  --_g: linear-gradient(var(--cblack) 0 0) no-repeat;
  /* 仅用两个背景：左侧和右侧 */
  background: 
    var(--_g) calc(var(--_pos) - 100%) 0 / 50% 100%,
    var(--_g) calc(200% - var(--_pos)) 0 / 50% 100%;
  color: var(--cblack);
  transition: background-position .4s, color .4s;
  outline-offset: .1em;
  /* 基础样式补充，让按钮更合理 */
  display: inline-block;
  padding: .5em 1.5em;
  font-size: 1rem;
  cursor: pointer;
}

.bannerbuttonV1:hover {
  --_pos: 100%;
  color: #fff;
  /* 悬停时背景位置过渡，合并成完整背景 */
  transition: background-position .4s, color .4s;
}

HTML

<div class='bannerbuttonV1'>
    shop now
</div>

实现说明

简化背景声明：只用2条背景规则，分别对应按钮的左半部分和右半部分，通过--_pos变量控制它们的水平位置，达成你想要的精简需求。
悬停与移出逻辑：
- 初始状态：--_pos:0%，两个背景分别固定在按钮左右两侧，此时按钮仅显示边框，背景拆分在左右。
- 悬停时：--_pos:100%，左右背景同时向中间移动拼接成完整背景，同步切换文字颜色。
- 移出时：变量还原为0%，背景反向移动回左右两侧，完美实现你要的反向动画效果。
过渡优化：移除原代码中冗余的background-size过渡逻辑，仅保留核心的位置与颜色过渡，让动画更流畅自然。