微信公众号

CSS按钮背景适应文字长度的解决方法

web前端 8011 14年前 (2010-10-18)

CSS按钮背景适应文字长度的解决方法

<!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>免费注册</span></a><a href="#"><span>登录</span></a><a href="#"><span>在淘宝网上开店</span></a></p>    
</body>    
</html>

分享给朋友：