Solution of adapting CSS button background to text length

web front end seven thousand six hundred and seventy-four 14 years ago (2010-10-18)

Solution of adapting CSS button background to text length

 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">     <html">     <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <style type="text/css">     a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url( https://www.toyean.com/zb_users/upload/37.gif ) no-repeat 0px 0px;  color: #d84700;  font-size: 14px;  font-weight: bold;  text-decoration: none;  padding-left:18px; }     a span { display:block; background: url( https://www.toyean.com/zb_users/upload/37.gif ) no-repeat right 0px;  padding-right:20px;}     a:hover { background: url( https://www.toyean.com/zb_users/upload/37.gif ) no-repeat 0px -37px;}     a:hover span{ background: url( https://www.toyean.com/zb_users/upload/37.gif ) no-repeat right -37px;}     </style>     </head>     <body>     <p><a href="#"><span>Free Registration</span></a><a href="#"><span>Login</span></a><a href="#"><span>Open a shop on Taobao</span></a></p> </body>     </html>