Question

我正在为我的应用创建一个样式化按钮。希望是使用css生成一个类似于：

的按钮

蓝色来自背景所以它不相关，它是我感兴趣的绿色阴影。我不确定它是否可以用CSS做它或如果可能的话怎么做。< / p>

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

若有，你知道哪些例子我也可以参考？

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过渡/渐变

1 个答案: