CSS：使按钮的颜色在中间变浅

Question

嗨，我是网页设计的新手。

我有一个绿色的按钮。如何使内部的颜色更浅而边缘的颜色更深。 （不谈论外部阴影）

这是一张图片

请注意内部颜色的效果，当接近内部颜色时，内部颜色会变浅。他们对此有什么作用？某种程度上几乎就像是3D。 谢谢

Answer 1

您可以使用阴影框（https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow）来实现。这是一个使用半透明黑盒阴影的示例。

* {
  box-sizing: border-box;
}

.btn {
  color: white;
  text-transform: uppercase;
  width: 300px;
  line-height: 50px;
  border-radius: 5px;
  background: #00B000;
  text-align: center;
  box-shadow: inset 0 0 25px rgba(0,0,0,.25)
}

<div class="btn">
  Add to Cart
</div>

Answer 2

您可以通过使用渐变来实现。我个人就是这样做的。

您可以使用Ultimate CSS Gradient Generator

之类的网站

您可以在网站上直观地创建渐变，它会吐出CSS代码供您粘贴：

http://colorzilla.com/gradient-editor/#176300+0,408e00+52,176300+100 */

背景：＃176300； / *旧版浏览器 / 背景：-moz-linear-gradient（top，＃176300 0％，＃408e00 52％，＃176300 100％）; / FF3.6-15 / 背景：-webkit-linear-gradient（top，＃176300 0％，＃408e00 52％，＃176300 100％）; / Chrome10-25，Safari5.1-6 / 背景：线性渐变（到底部，＃176300 0％，＃408e00 52％，＃176300 100％）； / W3C，IE10 +，FF16 +，Chrome26 +，Opera12 +，Safari7 + / 过滤器：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃176300'，endColorstr ='＃176300'，GradientType = 0）; / IE6-9 * /

希望有帮助！

Answer 3

尝试径向渐变：

    button {
    padding: 10px 40px;
    background-image: radial-gradient(#00cc44, #009933);
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    color:#fff;
    border: none;
    border-radius: 5px;
} 
<button type="button">ADD TO CART</button>