如何实现按钮hover状态下带圆角的线性渐变效果？

需求：做一个按钮，hover状态下呈现从左到右的线性渐变动画，且渐变区域要和按钮保持一致的25%圆角。动画效果参考下图：

你当前的实现思路 #

你通过修改背景位置来实现滑动渐变效果，核心代码如下：

/* 基础样式 */
button {
  background-position: 100% 0;
  background-size: 300% 100%;
  background-image: linear-gradient(to left, transparent 50%, #95E7A4 10%, #8FD8FA 35%, #CBBEFA 66%, #FEFEFE 94%);
  transition: all 1s ease-in-out;
}

/* hover状态 */
button:hover {
  background-position: 0 0;
  border-color: theme.colors.black;
}

解决圆角贴合问题的关键优化 #

要让渐变完全贴合按钮圆角，需要补充两个关键属性，同时可以调整渐变方向让动画更贴合“从左到右”的需求：

/* 调整后的完整样式 */
button {
  border-radius: 25%; /* 确保按钮本身有圆角 */
  overflow: hidden; /* 核心：限制背景不超出圆角范围 */
  border: 1px solid #你的初始边框颜色;
  background-position: -100% 0;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, #95E7A4 10%, #8FD8FA 35%, #CBBEFA 66%, #FEFEFE 94%);
  transition: all 1s ease-in-out;
  /* 补充按钮基础布局样式 */
  padding: 8px 20px;
  cursor: pointer;
}

button:hover {
  background-position: 0 0;
  border-color: black;
}

调整后，hover时渐变会从左侧平滑滑入，且完全贴合按钮的圆角，不会出现渐变溢出的情况。

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