Solution of adapting CSS button background to text length
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>