How to create a button with gradient background and background image?
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(
开发者_如何学Go 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?
Google's Gmail/Docs/etc UI buttons accomplish this using some CSS trickery. You can see someone else's implementation here:
http://todc.github.com/css3-google-buttons/#button
Basically the buttons are actual href anchors <a> with gradients applied to them. Then there is a separate style that sets the background to an image using the ::before psuedo-selector. It's a little tricky to re-implement but it's obviously possible.
Can't be done: see this article
Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background. You specify a gradient value instead of an image URL.
I'm sure webkit (safari/chrome) is probably the same way. IE doesn't support gradients.
My suggestion would be to wrap your submit button in a div element. Apply the gradient to the submit button, and the background image to the div and add a little padding to space it properly where needed. Or, use a <label> element for your submit button and apply the background images to the label.
加载中,请稍侯......
精彩评论