颜色交换按钮 | wjs-css-effects

左入

右入

中心

渐变

关键点

颜色交换效果用伪元素作为新色层，从一侧滑入覆盖原有背景色
伪元素初始 width: 0 或 transform: scaleX(0)，hover 时展开到 full
transform-origin: left 控制展开方向，从左到右或从右到左
按钮文字需设置 position: relative + z-index，确保在色层之上可见
使用 transition 平滑过渡，速度控制在 0.3s 左右手感最佳

效果说明

hover 时背景色从左向右滑入替换的按钮效果。利用 ::before 伪元素 + transform: scaleX 实现背景的横向展开，文字颜色同时过渡，形成平滑的颜色交换。这里展示 4 种变体：从左滑入、从右滑入、中心展开、渐变滑入。