Html 使按钮背景渐变

我试图理解如何制作按钮的背景渐变

我在谷歌上搜索了一下，找到了一些工具，但它们没有给我所需要的结果。我看起来不像origin那么优雅

这是我正在使用的工具：

我正在复制此页面上的按钮：

设计结果：

我拥有的：

这是该工具建议的代码：

.btn-muestrasgratis, .btn-muestrasgratis:active, .btn-muestrasgratis:visited {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#febf01+0,d66802+82;Yellow+Flat */
background: #febf01; /* Old browsers */
background: -moz-linear-gradient(top, #febf01 0%, #d66802 82%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #febf01 0%,#d66802 82%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #febf01 0%,#d66802 82%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#d66802',GradientType=0 ); /* IE6-9 */
}

更新1:

它在使用标签而不是按钮标签时起作用

使用按钮标签时，底部有一个边框。它不像使用标签那样平滑

我更喜欢使用按钮标签

我不知道使用标签或按钮标签是否重要，因为它会将数据作为DjangoWebApp发送到服务器

    <div class="btn-group mr-4" role="group" aria-label="First group">
        <button type="button" class="btn btn-comprar btn-xlarge text-white">Comprar</button>

</div>
    <a href="#" class="btn-comprar">Shop now</a>

购买

---

好的，使用

背景图像和
背景颜色尝试此操作


a.btn{
文字装饰：无；
背景色：#5ba4e6；
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
颜色：#fff；
字号：700；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文本阴影：0-1px0RGBA（0,0,0,25）；
字母间距：0；
线高：1.2；
-webkit字体平滑：抗锯齿；
-webkit盒阴影：插入0-2px0RGBA（0,0,0,15）；
-ms盒阴影：插入0-2px0RGBA（0,0,0,15）；
-moz盒阴影：插入0-2px0RGBA（0,0,0,15）；
-o形盒阴影：嵌入0-2px0 rgba（0,0,0,15）；
盒影：插入0-2px0RGBA（0,0,0,15）；
背景图像：线性梯度（至底部，rgba（255255255.09）0%，rgba（0,0,0.09）100%）；
字体大小：1.4rem；
填充：22px 30px；
边界半径：6px；
}
你需要btn像吗？@AnureshVP完全像它。@OmarGonzales看到更新，Anuresh。工作完美！