按钮颜色 CSS transition/gradients

Question

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

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

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

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

Answer 1

您可以通过使用色标的 CSS 渐变轻松地做到这一点。这是一个片段示例：

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

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

按钮颜色 CSS transition/gradients

Button color CSS transition/gradients

html

css

gradient

linear-gradients