How to use 2 gradients on single button - html

Question

I have to apply gradient to button with following things.
For normal state of button, I want to use
Top gradient from #0069A6 to #0078C0
Bottom gradient from #005F96 to #004085
For Hover state of button, I want to use
Top gradient from #02356A to #024183
Bottom gradient from #002147 to #01152D
For on click state of button, I want to use
Top gradient from #004085 to #005F96
Bottom gradient from #0078C0 to #0069A6
I have tried the following code.
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%);
}
Kindly help me get this solved.

Answer 1

You must use pseudo classes.
css for hover state will be writen 'button:hover {desierd css}'.
css for keydown state will be writen 'button:active{desierd css}'.
here is a link that describes the issue
http://www.w3schools.com/css/css_pseudo_classes.asp
hope it helps

Answer 2

You can use css selectors for this:
<style>
.button_color:hover{
background: linear-gradient(#01152D 10%,#0078C0 100%);
}
.button_color:active{
background: linear-gradient(#0000ff 10%,#ffffff 100%);
}
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(#ff002D 10%,#00eeC0 100%);
}
</style>
<button type="button" class="button_color">
Make Payment
</button>
The usage is simple: http://www.w3schools.com/cssref/sel_active.asp, there are other selectors that you can find by googling it. You can also change the color, border, and any property of your class and it will all be automated.
add any changes you want regard to your main class and when the selector activated, your css will be replaced.
please change the colors yourself, this is just a demo for how to do your work. You also don't need to include to top, etc. You have to play with the percentages. and that means the start of the color.
In your code, you set both of the start and end to 10% which it is wrong for a two color gradient.
For example, for 3 color gradient, one may use this: (red 10%, green 50%, blue 100%)

Answer 3

Take a look to the CSS-gradient-generator.
I don't know how you imagined it, so I created the gradients with hard breaks for you:
.button_color{
height:40px;
border-radius:10px;
color:white;
background: #0069a6;
background: -moz-linear-gradient(top, #0069a6 0%, #1e5799 50%, #0078c0 50%, #0078c0 51%, #005f96 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0069a6), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(51%,#0078c0), color-stop(100%,#005f96));
background: -webkit-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -o-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -ms-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: linear-gradient(to bottom, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0069a6', endColorstr='#005f96',GradientType=0 );
}
.button_color:hover{
background: #02356a;
background: -moz-linear-gradient(top, #02356a 0%, #1e5799 50%, #0078c0 50%, #0078c0 50%, #01152d 51%, #002147 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02356a), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#01152d), color-stop(100%,#002147));
background: -webkit-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -o-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -ms-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: linear-gradient(to bottom, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02356a', endColorstr='#002147',GradientType=0 );
}
.button_color:active{
background: #004085;
background: -moz-linear-gradient(top, #004085 0%, #005f96 50%, #0078c0 50%, #0078c0 50%, #0069a6 51%, #0078c0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004085), color-stop(50%,#005f96), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#0069a6), color-stop(100%,#0078c0));
background: -webkit-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -o-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -ms-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: linear-gradient(to bottom, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004085', endColorstr='#0078c0',GradientType=0 );
}
If this is not what you expected, try it yourself with the gradient generator.

Answer 4

You may try this one:
background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);
}
<button type="button" class="button_color">
Make Payment