自适应宽度按钮

按钮的宽度会随着字数而变

<title>无标题文档</title>
<style type="text/css">
a{
    float:left;
    text-decoration:none;
    display:block;
    height:37px;
    line-height:37px;
    text-align:center;
    font-weight:bold;
    color:#FF6600;
    font-size:14px;
    background:url(an3.gif) 0 0 no-repeat;
    margin:5px;
    padding-left:18px;
}
span{
    display:block;
    background:url(an3.gif) no-repeat right 0;
    padding-right:20px;
}
a:hover{
    background:url(an3.gif) 0 -37px no-repeat;
}
a:hover span{
    background:url(an3.gif) no-repeat right -37px;
}
</style>
</head>

<body>
<p>
<a href="#"><span>免费注册</span></a>
<a href="#"><span>登录</span></a></p>
<a href="#"><span>在淘宝上免费开店</span></a>
</p>
</body>

素材

posted on 2015-08-07 20:57 文森博客阅读(886) 评论(0) 编辑收藏举报