求实现截图中按钮hover斜切效果的方案（尝试skew无效）

要实现截图中按钮hover时的斜切滑动背景特效，你之前的代码逻辑存在伪元素初始位置与变换方向的问题，以下是可行的修正方案：

修正后的代码 #

CSS #

.skew-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  font-size: 16px;
  transition: color 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.skew-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: red;
  transform: skewX(-25deg);
  transition: left 0.3s ease;
  z-index: -1;
}

.skew-button:hover:before {
  left: -100%;
}

HTML #

<button class="skew-button">Hover Me</button>

关键实现要点 #

• 按钮本身仅保留基础样式与文字颜色过渡，背景动画完全由伪元素实现，避免多层背景冲突
• 伪元素初始定位在按钮右侧（left:100%），通过skewX(-25deg)设置斜切角度
• hover时修改伪元素的left值为-100%，配合过渡属性实现斜切滑动的覆盖效果
• 调整z-index确保伪元素在按钮文字下方，不遮挡内容

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