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>