Home > Article > Web Front-end > How to beautify buttons using css without using pictures
This article mainly introduces how to use CSS to beautify buttons without using pictures. Interested friends can refer to it.
The code is as follows:
<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>
Related recommendations:
##HTML Realize beautifying the style of uploaded files
Detailed graphic and text explanation of beautifying radio and check styles
How to beautify the styles of HTML checkbox and radio
The above is the detailed content of How to beautify buttons using css without using pictures. For more information, please follow other related articles on the PHP Chinese website!