CSS-如何添加第二个渐变以使此按钮半透明？

Question

I have these two buttons:

And i want to achive this effect:

Or just make the "button 2" half transparent (fade out effect) on the left side.
I think this can be achived with a second gradient that is transparent.

EDIT: The "button 1" and the "button 2" are parts of a form.

Here is my CSS:

.myButton {

border: none;
margin-right:0; 
padding-right:0; 
-moz-box-shadow: 0px 10px 14px -7px #273b73;
-webkit-box-shadow: 0px 10px 14px -7px #273b73;
box-shadow: 0px 10px 14px -7px #273b73;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #595cb3), color-stop(1, #494099));
background:-moz-linear-gradient(top, #595cb3 5%, #494099 100%);
background:-webkit-linear-gradient(top, #595cb3 5%, #494099 100%);
background:-o-linear-gradient(top, #595cb3 5%, #494099 100%);
background:-ms-linear-gradient(top, #595cb3 5%, #494099 100%);
background: linear-gradient(to bottom, #595cb3 5%, #494099 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#595cb3', endColorstr='#494099',GradientType=0);
background-color:#595cb3;
-moz-border-bottom-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-left-radius:8px;  -moz-border-top-left-radius:8px;
-webkit-border-top-left-radius:8px;
border-top-left-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:15px 60px;
text-decoration:none;
text-shadow:0px 1px 0px #3e5b8a;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #494099), color-stop(1, #595cb3));
background:-moz-linear-gradient(top, #494099 5%, #595cb3 100%);
background:-webkit-linear-gradient(top, #494099 5%, #595cb3 100%);
background:-o-linear-gradient(top, #494099 5%, #595cb3 100%);
background:-ms-linear-gradient(top, #494099 5%, #595cb3 100%);
background:linear-gradient(to bottom, #494099 5%, #595cb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#494099', endColorstr='#595cb3',GradientType=0);
background-color:#494099;
}



.myButton2 {
border: none;
margin-left:-20px; padding-left:0; -moz-box-shadow: 0px 10px 14px -7px #273b73;
-webkit-box-shadow: 0px 10px 14px -7px #273b73;
box-shadow: 0px 10px 14px -7px #273b73;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5986b3), color-stop(1, #406799));
background:-moz-linear-gradient(top, #5986b3 5%, #406799 100%);
background:-webkit-linear-gradient(top, #5986b3 5%, #406799 100%);
background:-o-linear-gradient(top, #5986b3 5%, #406799 100%);
background:-ms-linear-gradient(top, #5986b3 5%, #406799 100%);
background:linear-gradient(to bottom, #5986b3 5%, #406799 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5986b3', endColorstr='#406799',GradientType=0);
background-color:#5986b3;
-moz-border-bottom-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-bottom-right-radius:8px; -moz-border-top-right-radius:8px;
-webkit-border-top-right-radius:8px;
border-top-right-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:15px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #3e5b8a;
}
.myButton2:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #406799), color-stop(1, #5986b3));
background:-moz-linear-gradient(top, #406799 5%, #5986b3 100%);
background:-webkit-linear-gradient(top, #406799 5%, #5986b3 100%);
background:-o-linear-gradient(top, #406799 5%, #5986b3 100%);
background:-ms-linear-gradient(top, #406799 5%, #5986b3 100%);
background:linear-gradient(to bottom, #406799 5%, #5986b3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#406799', endColorstr='#5986b3',GradientType=0);
background-color:#406799;
}

Answer 1

If you want to use CSS gradients you could achieve that by using something like this:

button {
    height: 50px;
    width: 105px;
    display: block;
    color: #fff;
    float: left;
    border: none;
}
.one{
        background-color: #4E4EA8;
}
.two{
    background: #2f36ef; /* Old browsers */
    background: -moz-linear-gradient(left,  #2f36ef 0%, #2f36ef 0%, #4e4ea8 0%, #4e4ea8 5%, #557cb7 9%, #557cb7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2f36ef), color-stop(0%,#2f36ef), color-stop(0%,#4e4ea8), color-stop(5%,#4e4ea8), color-stop(9%,#557cb7), color-stop(100%,#557cb7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #2f36ef 0%,#2f36ef 0%,#4e4ea8 0%,#4e4ea8 5%,#557cb7 9%,#557cb7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #2f36ef 0%,#2f36ef 0%,#4e4ea8 0%,#4e4ea8 5%,#557cb7 9%,#557cb7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #2f36ef 0%,#2f36ef 0%,#4e4ea8 0%,#4e4ea8 5%,#557cb7 9%,#557cb7 100%); /* IE10+ */
    background: linear-gradient(to right,  #2f36ef 0%,#2f36ef 0%,#4e4ea8 0%,#4e4ea8 5%,#557cb7 9%,#557cb7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f36ef', endColorstr='#557cb7',GradientType=1 ); /* IE6-9 */


}

This is the example I just created:

http://jsfiddle.net/ncrd9y66/1/

I simply used http://www.colorzilla.com/gradient-editor/ to pick out colours from your example image to use in the generator and copied these into the example. Have a play with the values yourself to get the desired effect. here is mine for reference: http://www.colorzilla.com/gradient-editor/#2f36ef+0,2f36ef+0,4e4ea8+0,4e4ea8+5,557cb7+9,557cb7+100;Custom

(NOTE: these are not exactly the same colours you might be using i picked them out using PS quickly as an example of how you could achieve this effect.)

Answer 2

you can use the filter blur.. Try it and put the pixels size appropriate for your button.

Example:

.myButton2 {
-webkit-filter: blur(5px);
   -moz-filter: blur(5px);
    -ms-filter: blur(5px);
     -o-filter: blur(5px);
filter: blur(5px);
}