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

Question

您好我是网页设计的新手。

我有一个绿色的按钮。我怎样才能使颜色在内部更亮而在边缘更暗。（不说外影）

这是一张图片

注意内部颜色的效果，越接近中间颜色越亮。他们为此使用了什么效果？几乎就好像它在某种程度上是 3D 的。谢谢

Answer 1

您可以使用 box-shadow ( 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>