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