hi there,
i'm trying to use some jquery client side validation for my asp.net 2.0 webform. and it seems that the normal input submit button can easily trigger the validation on click.
but i'm currently using a three divs made up image button for this page, thus it doesn't auto trigger the validation.
i was looking at css3 and found that it now support gradient, it's all nice and good except for the fact that i need to show an arrow image on the right side of the button.
i've tested with normal background image and background color to setup a button and it works. but i can't seems to get the same thing to work for a gradient background and a background image.
<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>
any ideas?