html - 如何在单个按钮上使用 2 个渐变

Question

我必须使用以下内容将渐变应用于按钮。

1. 对于按钮的正常状态，我想使用

Top gradient from #0069A6 to #0078C0

Bottom gradient from #005F96 to #004085

1. 对于按钮的悬停状态，我想使用

Top gradient from #02356A to #024183

Bottom gradient from #002147 to #01152D

1. 对于按钮的点击状态，我想使用

Top gradient from #004085 to #005F96

Bottom gradient from #0078C0 to #0069A6

我试过下面的代码。

HTML

<button type="button" class="button_color">
Make Payment

CSS

.button_color{
    height:40px;
    border-radius:10px;
    color:white;
    background: linear-gradient(to bottom,#005F96 10%,#004085 10%);
    background: linear-gradient(to top,#0069A6 10%,#0078C0 10%);
}

请帮我解决这个问题。

Answer 1

你必须使用伪类。悬停状态的 css 将写为“button:hover {desierd css}”。

keydown 状态的 css 将写为 'button:active{desierd css}'。

这是描述问题的链接

http://www.w3schools.com/css/css_pseudo_classes.asp

希望对你有帮助