圆形按钮上的线性渐变[重复]

Question

让具有边框半径的按钮具有渐变效果的最佳方法是什么？

这应该是最终结果：

这是我要使用的线性渐变：

linear-gradient(#FF6064, #FF9867)

任何关于解决此问题的最佳方法的指针都会非常有用。我想我可能需要以某种方式掩盖按钮下方的某些内容？

Answer 1

渐变边框很简单 - 只需使用例如 2px 填充和线性背景创建一个链接，并在内部使用白色背景跨越。要使用线性渐变填充文本，您可以使用我不确定是否适用于所有浏览器的东西。代码：

a {
  display: inline-block;
  padding: 2px;
  background: linear-gradient(#FF6064, #FF9867);
  border-radius: 20px;
}
a > span {
  display: inline-block;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  background: #fff;
  border-radius: 18px;
}
a > span > span {
  font-weight: bold;
  background: linear-gradient(#FF6064, #FF9867);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<a href="#"><span><span>SOME TEXT</span></span></a>

Answer 2

你可以试试 background-clip 和 3 个渐变：

a {
  line-height: 2em;
  padding: 1em 2em;
  margin: 1em;
  display: inline-block;
  border-radius: 4em;
  border: solid transparent;
  background: linear-gradient(#fff, #fff), linear-gradient(#ff6064, #ff9867), linear-gradient(#ff6064, #ff9867);
  color: #ff6064;
  background-clip: padding-box, border-box, text;
}

<a href="#">button link </a>

---

chrome 和 IE 更喜欢这个：

a {
  font-size:2rem;
  padding: 1em 2em;
  margin: 1em;
  display: inline-block;
  border-radius: 4em;
  border:  solid transparent;
  background: linear-gradient(0deg,#ff6064, #ff9867), linear-gradient(0deg,#ff6064, #ff9867);
  color: #ff6064;
  background-clip:  border-box, text;
  background-position: center center;
  box-shadow:inset 0 0 0 100px white;
  background-size:  110% 110%;
}

<a href="#">Chrome</a> <a href="#"> IE 11</a> <a href="#"> Firefox</a> but background-clip: text dislike to be involved with multiple background :(