<ptml> <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 > <div class=tb></div> <div class=lr> <div class=bg ID=BG></DIV&G T <input Class=button Id=button Type=button value= "beautified button" > </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+= "} for (i=20;i>0;i= i-2) {rgb= RGB ("+ (nrgb[0]-1) +", "+ (nrgb[1]-1) +", "+ (nrgb[2]-1) +") "img+="} eval (id+ ". innerhtml=img")} RG B("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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]