按钮颜色 CSS 过渡/渐变答案

【问题标题】：Button color CSS transition/gradients按钮颜色 CSS 过渡/渐变
【发布时间】：2016-01-25 00:26:18
【问题描述】：

我正在为我的应用程序创建一个样式按钮。希望是使用 css 生成一个按钮，看起来类似于：

蓝色来自背景，所以它不相关，它是我感兴趣的绿色阴影。我首先不确定是否可以使用 CSS 来实现，或者如果可能的话如何实现。

你能从左上角开始渐变，从那里移动到不同的颜色，然后在渐变的底部以最终颜色结束吗？

如果有的话，有没有你知道的我也可以参考的例子？

【问题讨论】：

请注意，目前的设计趋势是扁平化和极简主义。也许带有一丝阴影:)

标签： html css gradient linear-gradients

【解决方案1】：

您可以通过使用颜色停止的 CSS 渐变轻松做到这一点。这是一个 sn-p 示例：

.gradientButton {
    height: 50px;
    width: 100px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    font-family:arial;
    font-size:26px;
    font-weight:bold;
    color:white;
    text-shadow:2px 2px #336633;
    box-shadow:2px 2px #336633;
    border: 1px solid black;
    border-radius:12px;
    background: linear-gradient(to bottom right, LawnGreen 15%, green 85%, DarkGreen 90%);
}

.gradientButton:hover {
    text-shadow:1px 1px #336633;
    box-shadow:1px 1px #336633;
    background: linear-gradient(to bottom right, LawnGreen 5%, green 80%, DarkGreen 85%);
}

<html>
  <body>
    <div class="gradientButton">log in</div>
  </body>
</html>

使用渐变和阴影之类的东西，您甚至可以像我在这里所做的那样提供悬停效果，当您将鼠标悬停在它上面时，它看起来就像按钮被按下了。

【讨论】：

太好了....现在我因为不知道而自责！好吧，我现在知道了，所以谢谢！