我想为我的应用程序创建一个样式化的按钮。希望是用css来生成一个类似下面的按钮:
蓝色来自背景，所以它不相关，它是我感兴趣的绿色阴影。我首先不确定是否可以使用 CSS 来实现，或者如果可能的话如何实现。
你能从左上角开始一个渐变，从那里移动到不同的颜色，并在渐变的底部以最终颜色结束吗？
如果有的话，您是否知道我可以引用的任何示例？
最佳答案
您可以通过使用色标的 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>使用渐变和阴影之类的东西，您甚至可以提供悬停效果，就像我在这里所做的那样，当您将鼠标悬停在按钮上时，它看起来像是按下按钮。
关于html - 按钮颜色 CSS 过渡/渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33336700/