Code for Beautifying buttons without using css for images
<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> <p style = "float: left; width: 100; "> <p class = tb> </p> <p class = lr> <p class = bg id = bg> </p> <input class = button id = button type = button value = "beautifying buttons"> </p> <p class = tb> </p> script function rgb () {ID = arguments [0] oRGB = eval (arguments [1]) nRGB = eval (arguments [2]) var IMG = "" for (I = 20; I> 0; 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 ")} 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
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]