CSS自适应宽度圆角按钮

CSS自适应宽度圆角按钮，不过个人认为叫“自适应宽度圆角菜单”更好，因为这个效果做菜单也很实用。

使用到的图片

CSS代码

<style>

* { margin:0;padding:0;}

body { padding:10px;font-size:12px;}

h1 { margin:0;padding:10px 0;font-size:14px;font-weight:bold;}

a { background:url(c.gif) left 0;color:#fff;text-decoration:none;height:30px;

     float:left;cursor:hand;margin:0 5px 0 0;}

a:hover { background:url(c.gif) left -30px;height:30px;}

a span { background:url(c.gif) right 0;padding:9px 8px 5px 0;margin:0 0 0 8px;

float:left;height:16px;}

a:hover span { background:url(c.gif) right -30px;color:#000;

padding:9px 8px 5px 0;margin:0 0 0 8px;height:16px;}

</style>

HTML代码

<h1><strong>CSS自适应宽度圆角按钮</strong></h1>

<a href="http://www.865171.cn"><span>首页</span></a> 

<a href="http://www.865171.cn"><span>CSS模板</span></a> 

<a href="http://www.865171.cn"><span>后台模板</span></a> 

<a href="http://www.865171.cn"><span>www.865171.cn</span></a>