Practical CSS Adaptive Width rounded button icon

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>css Adaptive Width Corner button </title>
<style>
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
A{background:url (Http://www.youhundao.com/images/button.gif) left 0; color: #fff; text-decoration:none; height:30px; Float:left; Cursor:hand; margin:0 5px 0 0;}
A:hover{background:url (Http://www.youhundao.com/images/button.gif) left-30px;height:30px;}
A span{background:url (http://www.youhundao.com/images/button.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; Float:left; height:16px;}
A:hover Span{background:url (http://www.youhundao.com/images/button.gif) right-30px; color: #000; padding:9px 8px 5px 0 ; margin:0 0 0 8px; height:16px; }
</style>
<a href= "http://www.balijieji.com/" ><span> two words </span></a>
<a href= "http://www.balijieji.com/" ><span> three words </span></a>
<a href= "http://www.balijieji.com/" ><span> four words </span></a>
<a href= "http://www.balijieji.com/" ><span> five words seemingly </span></a>
<a href= "http://www.balijieji.com/" ><span> many A lot of many manyWord </span></a>

</body>

Practical CSS Adaptive Width rounded button icon