As more and more mainstream browsers support these standards, we can already use some of these techniques to beautify the page. The
eliminates the need for a picture to create a button with a gradient rounded effect, which is much more convenient.
Complete code example go to http://www.alleyloft.com/contents/share?id=2 download
<div class= "main" > <!--CSS3 Custom gradient fillet button style--> <input type= "Submit" class= "BTN-STYLE-01" va Lue= "Submit"/> <!--CSS3 Custom gradient fillet button style--> </div> <style type= "Text/css" > btn-style-01{border-
Style:none;
PADDING:8PX 30px;
line-height:24px;
Color: #fff;
font:16px "Microsoft Yahei", Verdana, Geneva, Sans-serif;
Cursor:pointer;
border:1px #ae7d0a Solid;
-webkit-box-shadow:inset 0px 0px 1px #fff;
-moz-box-shadow:inset 0px 0px 1px #fff;
Box-shadow:inset 0px 0px 1px #fff/* Inner Glow effect * *-WEBKIT-BORDER-RADIUS:4PX;
-moz-border-radius:4px;
border-radius:4px;/* border fillet/text-shadow:1px 1px 0px #b67f01/* Font Shadow Effect * * Background-color: #feb100;
Background-image:-webkit-gradient (linear, 0 0, 0 100%, from (#feb100), to (#e8a201));
Background-image:-webkit-linear-gradient (Top, #feb100 0, #e8a201 100%);
Background-image:-moz-linear-gradient (Top, #feb100 0, #e8a201 100%); Background-image:-Ms-linear-gradient (Top, #feb100 0, #e8a201 100%);
Background-image:-o-linear-gradient (Top, #feb100 0, #e8a201 100%); Background-image:linear-gradient (Top, #feb100 0, #e8a201 100%);/* Color gradient effect/}. btn-style-01:hover {background-color:#
e8a201;
Background-image:-webkit-gradient (linear, 0 0, 0 100%, from (#e8a201), to (#feb100));
Background-image:-webkit-linear-gradient (Top, #e8a201 0, #feb100 100%);
Background-image:-moz-linear-gradient (Top, #e8a201 0, #feb100 100%);
Background-image:-ms-linear-gradient (Top, #e8a201 0, #feb100 100%);
Background-image:-o-linear-gradient (Top, #e8a201 0, #feb100 100%); Background-image:linear-gradient (Top, #e8a201 0, #feb100 100%); </style>