CSS - 如何添加第二個漸變使該按鈕變成透明的？

Question

我有這兩個按鈕：

，我想實現這一目標的效果：

或者只是讓 「按鈕2」 半透明（淡出效果）上左邊。
我認爲這可以使用透明的第二個漸變實現。

編輯：「按鈕1」和「按鈕2」是表格的一部分。

這裏是我的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

如果你想使用CSS漸變您可以通過使用這樣的事情做到這一點：

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 */ 


} 

這是我剛剛創建的例子：

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

我只是用http://www.colorzilla.com/gradient-editor/去pi從您的示例圖像中提取顏色以在生成器中使用並將其複製到示例中。爲了獲得理想的效果，請自己玩一玩。這裏是參考雷：http://www.colorzilla.com/gradient-editor/#2f36ef+0,2f36ef+0,4e4ea8+0,4e4ea8+5,557cb7+9,557cb7+100;Custom

（注：這是不是正是你可能會使用我挑出來迅速利用PS作爲你如何能達到這種效果的例子相同的顏色。）

Answer 2

您可以使用過濾器模糊..嘗試，並把像素大小適合您的按鈕。

例子：

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