求助：实现按钮文字渐变效果且保留按钮背景色的方法

问题出在你hover状态的CSS写法上：直接用background属性设置渐变会覆盖按钮原有的黑色背景，再加上background-clip: text，导致按钮区域失去背景色。下面提供两种解决方案：

方案1：保留原背景色，单独设置文字渐变 #

修改hover状态的CSS，明确保留按钮背景色，仅给文字添加渐变效果：

button.default {
  width: 154px;
  height: 72px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  object-fit: contain;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(65deg, #ff8d4d 0%, #6d37ff 100%);
  border-image-slice: 1;
  background-color: #000;
  text-transform: uppercase;
  color: #fff;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 1.28px;
  font-weight: 500;
  font-family: 'Roboto Condensed';
}

button.default:hover {
  /* 强制保留按钮黑色背景 */
  background-color: #000;
  /* 给文字应用渐变 */
  background-image: linear-gradient(to right, #FF8D4D 0%, #6d37ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<button class="default">Saiba Mais</button>

原理说明 #

background是复合属性，会同时覆盖background-color和background-image。单独用background-image设置渐变，再配合background-color保留原背景，就能实现仅文字渐变、按钮背景不变的效果。

方案2：用span包裹文字，分离背景与文字样式 #

这种方法逻辑更清晰，把文字和按钮的样式完全分开，避免属性冲突：

<button class="default"><span>Saiba Mais</span></button>

button.default {
  width: 154px;
  height: 72px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  object-fit: contain;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(65deg, #ff8d4d 0%, #6d37ff 100%);
  border-image-slice: 1;
  background-color: #000;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 1.28px;
  font-weight: 500;
  font-family: 'Roboto Condensed';
}

button.default span {
  color: #fff;
}

button.default:hover span {
  background-image: linear-gradient(to right, #FF8D4D 0%, #6d37ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

原理说明 #

通过span标签单独包裹文字，hover时只给span设置渐变样式，按钮的背景色完全不受影响，从根源上避免了背景覆盖问题。

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