码迷,mamicode.com
首页 > 其他好文 > 详细

自适应宽度按钮

时间:2015-08-07 22:05:58      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

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

<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>

 素材

技术分享

自适应宽度按钮

标签:

原文地址:http://www.cnblogs.com/919czzl/p/4711895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!