线性渐变在圆形按钮上

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

你可以尝试背景剪辑和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＆amp; 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 :(