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>
Related articles
Zblog removes the word "last edit" from the comment Intelligent floating layer positioning solution Position: absolute under IE6 to locate bugs and solutions The method of Zblog calling the latest articles in the secondary directory Jquery determines the browser type CSS with text exceeding the number of characters displayed with ellipsis