Button 如何创建具有渐变背景和背景图像的按钮？
我正在尝试为我的asp.net 2.0网络表单使用一些。 而且，正常的输入提交按钮似乎可以在单击时轻松触发验证 但是我目前在这个页面上使用了一个由三个部分组成的图像按钮，因此它不会自动触发验证 我在看css3时发现它现在支持渐变，除了我需要在按钮的右侧显示一个箭头图像之外，它都很好 我已经测试了正常的背景图像和背景颜色，以设置一个按钮，它的工作。但是对于渐变背景和背景图像，我似乎无法得到同样的效果Button 如何创建具有渐变背景和背景图像的按钮？,button,css,background-image,gradient,Button,Css,Background Image,Gradient,我正在尝试为我的asp.net 2.0网络表单使用一些。 而且，正常的输入提交按钮似乎可以在单击时轻松触发验证 但是我目前在这个页面上使用了一个由三个部分组成的图像按钮，因此它不会自动触发验证 我在看css3时发现它现在支持渐变，除了我需要在按钮的右侧显示一个箭头图像之外，它都很好 我已经测试了正常的背景图像和背景颜色，以设置一个按钮，它的工作。但是对于渐变背景和背景图像，我似乎无法得到同样的效果 <html> <head> <link rel="styleshee
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid Sans">
<style>
.button{
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(88,73,229)),
color-stop(0.63, rgb(115,103,255)),
color-stop(0.82, rgb(150,134,255))
);
-moz-linear-gradient(
center bottom,
rgb(88,73,229) 25%,
rgb(115,103,255) 63%,
rgb(150,134,255) 82%
);
color:#FCD3A5;
-webkit-border-radius: 5px;
-moz-border-radius: 10px;
font: 12px;
width:140px;
line-height: 28px;
height: 28px;
font-weight: bold;
font-family:"Droid Sans",serif;
}
.orange{
background:-moz-linear-gradient(center top , #FF9300, #FF6800) repeat scroll 0 0 transparent;
border:1px solid #CFCFCF;
color:#FFFFFF;
font: 12px;
width:140px;
line-height: 28px;
height: 28px;
font-family:"Droid Sans",serif;
background-image:url(arrow_right.png);
background-repeat: no-repeat;
background-position:right;
}
.button2{
background-color:#2daebf;
background-image:url(arrow_right.png);
font: 12px;
width:140px;
line-height: 28px;
height: 28px;
font-weight: bold;
color: white;
font-family:"Droid Sans",serif;
background-repeat: no-repeat;
background-position:120px;
border: 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.button3{
background: green; /* fallback for older/unsupporting browsers */
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(88,73,229)),
color-stop(0.63, rgb(115,103,255)),
color-stop(0.82, rgb(150,134,255))
);
background:-moz-linear-gradient(
center bottom,
rgb(88,73,229) 25%,
rgb(115,103,255) 63%,
rgb(150,134,255) 82%
);
border-top: 1px solid white;
background-image:url(arrow_right.png);
background-repeat: no-repeat;
background-position:120px;
}
</style>
</head>
<input class="button3" type="submit" value="SUBMIT"/ >
</html>
.按钮{
-webkit梯度(
线性的
左下角，
左上角，
彩色光圈（0.25，rgb（88,73229）），
彩色光圈（0.63，rgb（115103255）），
彩色光圈（0.82，rgb（150134255））
);
-莫兹线性梯度(
中底，
rgb（88,73229）25%，
rgb（115103255）63%，
rgb（150134255）82%
);
颜色：#FCD3A5；
-webkit边界半径：5px；
-moz边界半径：10px；
字体：12px；
宽度：140px；
线高：28px；
高度：28px；
字体大小：粗体；
字体系列：“Droid Sans”，衬线；
}
.橙色{
背景：-moz线性渐变（中上，#FF9300，#FF6800）重复滚动0透明；
边框：1px实心#CFCFCF；
颜色：#FFFFFF；
字体：12px；
宽度：140px；
线高：28px；
高度：28px；
字体系列：“Droid Sans”，衬线；
背景图片：url（arrow_right.png）；
背景重复：无重复；
背景位置：右；
}
.按钮2{
背景色：#2daebf；
背景图片：url（arrow_right.png）；
字体：12px；
宽度：140px；
线高：28px；
高度：28px；
字体大小：粗体；
颜色：白色；
字体系列：“Droid Sans”，衬线；
背景重复：无重复；
背景位置：120px；
边界：0px；
-webkit边界半径：5px；
-moz边界半径：10px；
-moz盒阴影：0 1px 3px rgba（0,0,0,0.5）；-webkit盒阴影：0 1px 3px rgba（0,0,0,0.5）；文本阴影：0-1px 1px rgba（0,0,0,0.25）；
}
.按钮3{
背景：绿色；/*旧浏览器/不支持浏览器的回退*/
背景：-webkit渐变(
线性的
左下角，
左上角，
彩色光圈（0.25，rgb（88,73229）），
彩色光圈（0.63，rgb（115103255）），
彩色光圈（0.82，rgb（150134255））
);
背景：-moz线性梯度(
中底，
rgb（88,73229）25%，
rgb（115103255）63%，
rgb（150134255）82%
);
边框顶部：1px纯白；
背景图片：url（arrow_right.png）；
背景重复：无重复；
背景位置：120px；
}
我的建议是将提交按钮包装在div元素中。将渐变应用于submit按钮，将背景图像应用于div，并在需要的地方添加一点填充以适当隔开。或者，在提交按钮中使用
基本上，按钮是实际的href锚
：：before基本上，按钮是实际的href锚
：：before