代码如下：
<html> <style> .tb{width:100%;height:1px;overflow:hidden;background:rgb(250,100,0);margin:0 1px;} .lr{width:100%;height:20px;overflow:hidden;border-left:1px solid rgb(250,100,0);border-right:1px solid rgb(250,100,0);} .bg{width:100%;height:20px;overflow:hidden;} .button{position:relative;width:100%;height:20px;top:-20px;font- size:9pt;border:0;background:none;} </style> <div style="float:left;width:100;"> <div class=tb></div> <div class=lr> <div class=bg id=bg></div> <input class=button id=button type=button value="美化了的按钮"> </div> <div class=tb></div> </div> <script> function rgb(){ id=arguments[0] orgb=eval(arguments[1]) nrgb=eval(arguments[2]) var img="" for(i=20;i>0;i=i-2){ rgb="rgb("+(orgb[0]-1)+","+(orgb[1]-1)+","+(orgb[2]-1)+")" img+="<img style=\"width:100%;height:1px;background:"+rgb+"\">" } for(i=20;i>0;i=i-2){ rgb="rgb("+(nrgb[0]-1)+","+(nrgb[1]-1)+","+(nrgb[2]-1)+")" img+="<img style=\"width:100%;height:1px;background:"+rgb+"\">" } eval(id+".innerhtml=img") } rgb("bg",[255,180,20],[255,140,20]) button.onmouseover=function(){rgb("bg",[255,200,20],[255,160,20])} button.onmouseout=function(){rgb("bg",[255,180,20],[255,140,20])} </script>
相关推荐：
html实现美化上传文件样式
单选、复选样式美化的图文详解
html的checkbox和radio怎样美化样式
以上就是如何做到不用图片用css实现按钮的美化的详细内容。