v2ex的按钮样式

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

 

< html >
     < head >
         < style  type ="text/css" > ...
            body, html {...}{
                margin: 0px;
                padding: 0px;
                font-family: "Lucida Grande", Tahoma, Verdana, arial, sans-serif, hei;
                background: #FFF url("/img/bg_city.jpg") 50% 0 fixed repeat-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_i a:link, div.btn_2_i a:visited, div.btn_2_i a:active {...}{
                text-decoration: none;
                color: #000;
            }

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

     < body >

     < div  align ="left"  style ="margin: 10px 0px 0px 0px; padding-left: 390px;" >
         < script  type ="text/javascript" > ...
        var i = new Image(15,15); i.src="loading.gif";
        var change = function() ...{
        var c = getObj("btn_8323"); 
        c.innerHTML = "<img src=loading.gif align=absmiddle /> <span class=tip_i>Requesting</span>";
        //var o = getObj("form_topic_reply");return o.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