Html CSS渐变按钮

我做了一个基于纯css的渐变按钮

但由于某些原因，它在firefox和chrome中看起来有所不同

我想要它在FF中的外观是从左上角开始的渐变…但在Chrome中它是从上到下的渐变

<div id="foo2_pag" class="pagination" style="display: block;">  <a id="second" href="#"><span>London</span></a> 
</div>

JSIDLE链接：

---

请看一看。提前谢谢。

您使用的是

左上方的
，但Mozilla浏览器需要稍有不同的代码，如中所示



另外，这个答案是基于你的小提琴的代码，但你可能想添加一些额外的设置，所以它将是跨浏览器的。使用标准的
线性渐变
（
-moz
前缀在新的FF浏览器上是多余的）是您可以做的一项改进


线性梯度语法
形式语法：线性梯度（
[|到，]？[，]+）
\---------------------------------/ \----------------------------/
渐变线颜色停止列表的定义
式中=[左|右]|[上|下]
和=[|]？
您可以将标准线性渐变样式设置为：

background:linear-gradient( 180deg, #BED630, #0DB04B );

用于跨浏览器渐变

/* For WebKit (Safari, Google Chrome etc) */
background:-webkit-gradient(linear, left top, left bottom, from(#eab730), to(#db5500));
/* For Mozilla/Gecko (Firefox etc) */
background:-moz-linear-gradient(top, #eab730, #db5500);
/* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#eab730, endColorstr=#db5500);
/* For Internet Explorer 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#eab730, endColorstr=#db5500)";

我强烈建议在上使用渐变编辑器。在一个好的WYSIWYG编辑器中创建渐变，它将自动生成跨浏览器兼容的代码，包括IE9的SVG回退（如果需要）。IMO不可或缺的工具。
以下是渐变圆形按钮的跨浏览器工作示例，它可能会帮助某些人：


HTML
您的fiddle不包含class.pagination的任何元素。这样比较好。此外，您还应该提到您希望它看起来如何尝试这把小提琴中的代码：伙计们，对不起，忘了将类分页（没想到会有否决票：p）…Itay如果你在两个浏览器中都看到按钮，那么它看起来就不一样了。在Chrome中，它的效果是从上到下的，而在FF中，它是从左到中的。谢谢Sonasish的帮助。实际上我想要的是从左到中而不是从上到中开始渐变。看看Itay的建议。谢谢Itay。我得到了它的帮助改变位置。背景：-webkit渐变（线性、左下、右上、颜色停止（0.05，#BED630）、颜色停止（1，#0DB04B））；背景：-moz线性梯度（向右，#BED630 5%，#0DB04B 100%）；非常感谢你的帮助，不客气。是的，在一个浏览器中，它是从上到下的，在一个浏览器中是从左到右的，所以我不得不猜测你想要哪个选项。谢谢Brendan的帮助。你能为代码添加一些解释吗？这将是一个更好的答案。欢迎您询问任何您感兴趣的特定代码行，除此之外，大多数基本css代码都是不言自明的，其余的是使其能够跨浏览器工作。
background:linear-gradient( 180deg, #BED630, #0DB04B );

/* For WebKit (Safari, Google Chrome etc) */
background:-webkit-gradient(linear, left top, left bottom, from(#eab730), to(#db5500));
/* For Mozilla/Gecko (Firefox etc) */
background:-moz-linear-gradient(top, #eab730, #db5500);
/* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#eab730, endColorstr=#db5500);
/* For Internet Explorer 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#eab730, endColorstr=#db5500)";

<div class="container">
  <h1 class="text-center">Big beautifull gradient button</h1>
    <button type="button" class="gradient btn-lg bigrounded btn-block blue xxl">Click Me</button>
</div>

.gradient {
   display: inline-block;
   vertical-align: baseline;
   margin: 0 2px;
   outline: none;
   text-align: center;
   text-decoration: none;
   padding: .5em 2em .55em;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -webkit-border-radius: .5em; 
   -moz-border-radius: .5em;
   border-radius: .5em;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.bigrounded {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.blue {
  color: #d9eef7;
  border: solid 1px #0076a3;
  background: #0095cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  background: -moz-linear-gradient(top,  #00adee,  #0078a5);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
  background: #007ead;
  background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
  background: -moz-linear-gradient(top,  #0095cc,  #00678e);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
  color: #80bed6;
  background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
  background: -moz-linear-gradient(top,  #0078a5,  #00adee);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
.xxl{
  font-size:50px;
  padding:15px;
}