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

Question

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

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

我想使按钮文本（“一些文本”）具有此渐变：

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>

Answer 2

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

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

现在只需将渐变文本类添加到按钮，并确保它在引导样式后出现:)