咱们直接拆解你遇到的核心问题，以及对应的修复方法：

1. 重复设置background属性，直接覆盖了文本渐变 #

你在.button类里先写了用于文本裁剪的渐变背景，但紧接着又设置了background: #fff;——这会直接把之前的渐变覆盖掉！-webkit-background-clip: text完全依赖那个渐变背景才能生效，被白色背景覆盖后，自然看不到文本渐变效果。

同样，.button:hover里先写了background: #000;，也会覆盖后面的hover渐变，导致鼠标悬浮时的文本渐变失效。

2. 语法细节错误影响样式生效 #

你写的-webkit-border-radius: 60;缺少单位px，虽然部分浏览器可能容错，但规范写法必须加上单位，否则会被视为无效样式。

修复后的完整代码 #

我帮你调整了代码逻辑，解决了覆盖问题，同时优化了语法细节：

.button {
  /* 按钮自身的背景样式 */
  background: #fff;
  border-radius: 60px;
  font-family: Arial;
  font-size: 60px;
  padding: 10px 20px;
  text-decoration: none;
  
  /* 文本渐变核心设置，用background-image避免和纯色背景冲突 */
  background-image: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 增加标准属性提升兼容性 */
  background-clip: text;
}

.button:hover {
  /* 去掉干扰的黑色背景，直接设置hover状态的文本渐变 */
  background-image: linear-gradient(150deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

<div>
  <a class="button" href="course.html">Start</a>
</div>

额外优化说明 #

• 把渐变从background改成background-image，这样既保留了按钮的白色背景，又不会覆盖文本渐变的依赖背景。
• 简化了重复的padding写法，从10px 20px 10px 20px改成10px 20px，效果完全一致。
• 添加了标准的background-clip: text，提升非webkit内核浏览器的兼容性。

调整后，文本渐变就能正常显示在按钮的白色背景上方，hover状态的渐变也能正常触发了！

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