html - 制作按钮背景渐变

Question

我正在尝试了解如何制作按钮的背景渐变。

我用谷歌搜索了一下，找到了一些工具，但它们没有提供我需要的结果。我看起来不像原产地那么优雅。

这是我正在使用的工具:

http://www.colorzilla.com/gradient-editor/

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

https://www.stickermule.com/

期望的结果:

我有什么:

这是该工具建议的代码:

.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:

它在使用标签而不是按钮标签时有效。

使用按钮标签时，按钮处有边框。它不像使用标签那么顺利。

我更愿意使用按钮标签。

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

    <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>

Answer 1

好的，使用 background-image 和 background-color 试试这个

a.btn {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
}

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

更新添加 border:none;

button.btn {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}
button.btn:focus {
	outline:none;
}

<button class="btn" >Shop now</button>