Question

所以，我有这个引导按钮：

<button type="button" class="btn btn-outline-primary btn-lg">Some text</button>

我希望使按钮文本（“Some text”）具有此渐变：

linear-gradient(to bottom right, #67b26f, #4ca2cd);

我尝试将color属性设置为使用CSS添加渐变，但不起作用。

有没有办法使用CSS为该文本提供渐变颜色？

谢谢你，祝你有个美好的一天！

Answer 1

试试这个

button {
	font-size: 72px;
	background: -webkit-linear-gradient(#eee, #333);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

<button type="button" class="btn btn-outline-primary btn-lg">Some text</button>

<强>更新

如果要为按钮添加背景颜色，则可以使用：after   内容。

喜欢这个：

button {
  position: relative;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* for adding bg-color for btn */
button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  z-index: -1;
}

<button type="button" class="btn btn-outline-primary btn-lg">Some text</button>

Answer 2

尝试将渐变设置为背景图像，然后将文本颜色设置为透明，然后使用-webkit-background-clip属性将其设置为文本。试试这个：

.gradient-text {
    background-image: linear-gradient(to bottom right, #67b26f, #4ca2cd);
    -webkit-background-clip: text;
    color: transparent;
}

现在只需将渐变文本类添加到按钮，并确保它位于引导样式之后：）

如何在按钮文本上添加渐变颜色？

2 个答案: