v2ex的按钮样式

由v2ex的回复页面的源码而来

< html >
< head >
< style type ="text/css" > ...
body,html{...}{
margin:0px;
padding:0px;
font-family:"LucidaGrande",Tahoma,Verdana,arial,sans-serif,hei;
background:#FFFurl("/img/bg_city.jpg")50%0fixedrepeat-y;
}
div.btn_2_o{...}{
width:120px;
height:21px;
background-image:url("btn_bg.png");
-moz-border-radius:5px;
background-color:#E0E0E0;
padding:0px;
margin:0px;
}

div.btn_2_i{...}{
text-align:center;
padding-top:3px;
color:#FFF;
font-size:12px;
}

div.btn_2_ia:link,div.btn_2_ia:visited,div.btn_2_ia:active{...}{
text-decoration:none;
color:#000;
}

div.btn_2_ia:hover{...}{
text-decoration:none;
color:#333;
}
.tip_i{...}{
font-size:12px;
color:#AFAFAF;
text-shadow:none;
}
</ style >
< SCRIPT LANGUAGE ="JavaScript" > ...
<!--
vargetObj=function(objId)...{
returndocument.all?document.all[objId]:document.getElementById(objId);
}
//-->
</ SCRIPT >

</ head >

< body >

< div align ="left" style ="margin:10px0px0px0px;padding-left:390px;" >
< script type ="text/javascript" > ...
vari=newImage(15,15);i.src="loading.gif";
varchange=function()...{
varc=getObj("btn_8323");
c.innerHTML="<imgsrc=loading.gifalign=absmiddle/><spanclass=tip_i>Requesting</span>";
//varo=getObj("form_topic_reply");returno.submit();
}
</ script >
< div id ="btn_8323" align ="center" style ="width:120px;" >
< div class ="btn_2_o" align ="left" onclick ="change();" >
< div class ="btn_2_i" align ="center" >
< a href ="#;" onclick ="change();" onmousedown ="change();" > Submit </ a >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >

点击之前截图

点击之后截图

本段代码所需要的图片

loading.gif

btn_bg.png