标签按钮纯CSS实现

<style type="text/css">
.g_a{display:-moz-inline-stack; display:inline-block; border-bottom:1px solid #7485a3; border-top:1px solid #8190ac; background:#9baed0; text-decoration:none;}
.g_b{float:left; border-left:1px solid #8190ac; border-right:1px solid #7485a3; padding:1px 0; margin:0 -1px; position:relative;}
.g_c{float:left; border-left:1px solid #8190ac; border-right:1px solid #7485a3; margin:0 -2px; background:#8898b6; position:relative;}
.g_d{display:block; line-height:4px; background:#9baed0; border-bottom:4px solid #92a3c3; border-top:8px solid #a2b6da;}
.g_e{display:block; line-height:16px; border-bottom:4px solid #8190ac; border-top:4px solid #a9bee2; margin-top:-16px; padding:0px 12px; font-size:12px; color:#fff; cursor:pointer;}
.g_a:hover{text-decoration:none;}
</style>

html:

 <a href="javascript:void(0);" class="g_a  vm">
                    <span class="g_b">
                        <span class="g_c">
                            <span class="g_d">&nbsp;</span>
                            <span class="g_e">宽度自适应</span>
                        </span>
                    </span>
                </a>