我有这两个按钮:CSS - 如何添加第二个渐变使该按钮变成透明的?
,我想实现这一目标的效果:
或者只是让 “按钮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;
}
嗯,它很好地完成,谢谢你:)但我仍然有一些问题,因为你可以看到我的CSS我使用悬停选择器,所以当我悬停时,它只突出显示按钮的一部分,这使得它很丑陋。 – 2014-11-06 17:14:54
啊,好的。你想要的悬停效果是什么? – 2014-11-06 17:27:03
要正确突出显示按钮(按钮1的所有紫色部分)(按钮2的所有蓝色部分) – 2014-11-06 17:31:55