CSS自适应宽度圆角按钮

 

通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。

 

<style type="text/css">
html , body , div , span , p , img , a , ul , li , table , tr , td , form , input , button , textarea {}{
    margin:0;
    padding:0;
    border:0;
}
body {}{
    COLOR:#000;
    font:normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋体";
}
ul , li {}{
    list-style-type:none;
}
a {}{text-decoration:none;}
.div {}{
    margin:100px;
}
a.ad_7day_button:hover {}{
    background:url(ad_button.gif) no-repeat left top;
}
.ad_7day_button {}{
    padding-left:10px;
    background:url(ad_button.gif) no-repeat left top;
    float:left;
    display:block;
    height:27px;
    margin-left:10px
}
.ad_7day_button span{}{
    line-height:14px;
    font-size:14px;
    padding:7px 10px 6px 0;
    background:url(ad_button.gif) no-repeat right top;
    display:block;
    color:#4f463f;
}
</style>


<div class="div">
<a class="ad_7day_button" href="#"><span>马上注册</span></a>
<br /><br /><br /><br />
<a class="ad_7day_button" href="#"><span>注册</span></a>
<br /><br /><br /><br />
<a class="ad_7day_button" href="#"><span>保存并下一步</span></a>
<br /><br /><br /><br />
<a class="ad_7day_button" href="#"><span>保存并下一步保存并下一步</span></a>
</div>