How to use 2 gradients on one button
I need to apply a gradient to a button with the following things.
- For the state of a normal button, I want to use
Top gradient from #0069A6 to #0078C0
Bottom gradient from #005F96 to #004085
- For button Hover button, I want to use
Top gradient from #02356A to #024183
Bottom gradient from #002147 to #01152D
- For a button click , 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%);
}
Please help me to solve this problem.
source to share
You can try this:
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
source to share
You can use css selector 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>
Usage is simple: http://www.w3schools.com/cssref/sel_active.asp , there are other selectors you can find by following the link. You can also change the color, border and any property of your class, and it will all be automated.
add the changes you want to consider in your main class and when the selector is activated your css will be replaced.
please change the colors yourself, this is just a demo for how to do your job. You also don't need to include etc. You need to play with interest. and that means the beginning of the color.
In your code, you are setting both start and end to 10%, which is not correct for a two-color gradient.
For example, for a three color gradient, you can use this: (red 10%, green 50%, blue 100%)
source to share
Take a look at the CSS Gradient Generator .
I don't know how you imagined this, so I created 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 a gradient generator.
source to share
You have to use pseudo classes. css for the hover state it will say 'button: hover {desierd css}'.
css for the keydown state it will say 'button: active {desierd css}'.
here is a link that describes the problem
http://www.w3schools.com/css/css_pseudo_classes.asp
hope this helps
source to share