实现带交替三角形过渡效果的按钮Hover交互

你要的效果是：按钮未被Hover时左侧显示单个三角形，Hover后交替排列的三角形从左到右覆盖整个按钮。你的现有代码用:before和:after伪元素没法实现重复排列的三角形图案，换用CSS背景渐变+过渡动画可以轻松搞定，下面是实现方案：

完整实现代码 #

HTML #

<button class="triangle-btn">Hover Me!</button>

CSS #

.triangle-btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  /* 核心：用线性渐变创建交替三角形图案 */
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
                    linear-gradient(-45deg, transparent 50%, #fff 50%);
  background-size: 50px 100%; /* 单个三角形单元的尺寸 */
  background-repeat: repeat-x;
  background-position: -50px 0; /* 默认只显示左侧第一个三角形 */
  transition: background-position 0.6s ease;
  overflow: hidden;
}

.triangle-btn:hover {
  background-position: 100% 0; /* Hover时让三角形图案滚动铺满按钮 */
}

/* 用伪元素做按钮底色，避免文字被渐变遮挡 */
.triangle-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  z-index: -1;
}

实现思路 #

1. 三角形图案生成：通过两个方向相反的线性渐变，组合出单个白色三角形的背景单元
2. 默认状态控制：设置background-position: -50px 0，让所有三角形初始隐藏在按钮左侧外部，仅露出第一个三角形
3. Hover动画逻辑：修改background-position到按钮右侧，让重复的三角形图案从左到右平滑滚动，铺满整个按钮区域
4. 文字层级修复：用伪元素单独设置按钮底色，确保文字不会被渐变图案遮挡

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