CSS自适应宽度圆角按钮

1.背景图片实现

a { display: block; float:left; margin-left:5px; height: 37px;line-height: 37px;  background: url(btn_bg.png) no-repeat 0px 0px; color: #d84700; text-decoration: none; padding-left:18px; }
  a span { display:block; background: url(btn_bg.png) no-repeat right 0px; padding-right:20px;}
  a:hover { background: url(btn_bg.png) no-repeat 0px -37px;}
  a:hover span{ background: url(btn_bg.png) no-repeat right -37px;}

 <p>
  <a href="#"><span>免费注册</span></a>
  <a href="#"><span>登录</span></a>
  <a href="#"><span>自适应宽度</span></a>
 </p>

[img]http://dl.iteye.com/upload/attachment/0072/4594/8a8fc394-d1c2-39ca-884a-9cd4da7f9078.png[/img]
原理就是做一个足够宽的背景，a和span都用同一张背景图，文字左侧部分显示的是a的背景，文字本身和右侧部分显示的是span的背景，拼接成一个按钮。

2.CSS3 火狐和Chrome实现

.button1{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

-moz-box-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.3);
box-shadow:0 1px 0 rgba(0,0,0,0.3);

background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);

background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));

color:#4A4A4A;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 15px;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
}

.button1:hover{
background: -moz-linear-gradient(19% 75% 90deg,#D6D6D6, #FAFAFA);
background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D6D6D6));
}

<p><a class="button1">渐变圆角按钮</a></p><br />

效果：

[img]http://dl.iteye.com/upload/attachment/0072/4708/00604d5c-f9aa-3799-b5e7-fa28cf27e9b7.png[/img]

.button7{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

background: -moz-linear-gradient(19% 75% 90deg,#F0DEB8, #FDF0D1, #fff 100%);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0DEB8), color-stop(.3,#FDF0D1));

color:#836d4d;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 70px;
border: 1px solid #d4c198;
}

.button7:hover{
background: -moz-linear-gradient(19% 75% 90deg,#EBD9B4, #F2E6C8, #F5F5F5 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EBD9B4), color-stop(.3,#F2E6C8));
}
<a class="button7">渐变圆角按钮</a>

[img]http://dl.iteye.com/upload/attachment/0072/4712/e64f027a-b511-3461-ae85-37e8ae161de4.png[/img]