昨天群里大家讨论到一个豆瓣上的按钮，下面这个。在这里用到了不同宽度的按钮，但是只是用到了一个图片。
演示地址：http://5key.net/demo/liquid-css-menu/
先来看张图片：
原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok，看看代码吧。
*{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(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;} a:hover{background:url(1.gif) left -30px;height:30px;} a span{background:url(1.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px; }
<h1>CSS自适应宽度圆角按钮 @5key.net</h1>
<a href=”#”><span>首页</span></a>
<a href=”#”><span>不是首页</span></a>
<a href=”#”><span>他也许是首页</span></a>
<a href=”#”><span>但他一定不是首页</span></a>
<a href=”#”><span>好了，就这样把。别扯了~</span></a>
谢谢收下了 [lol]
[回复]
如果把图片弄成透明背景的，还可以做到换颜色~
[回复]
呵呵。。。确实
[回复]
如果文字超过背景图片的宽度，圆角背景就乱了。
[回复]
这里我只是做了一个小的测试。这个图片你可以无限长。
当然，我们只需要一个相对比较大的值就行。毕竟按钮也不会是很长的文字
[回复]
这个按钮的方法最早好像在客齐集的头部按钮中就是这样做了!以前参考过!很方便!
[回复]
这个东西很好玩啊~太帅了哦~
[回复]
[cool] 哦~原来是这样啊!原来是多了个span..不用就不行了..看来不是太实用啊.. [rolleyes]
[回复]
douban天天上，觉得这个按钮设计的不错。
[回复]
dddddd
[回复]
http://www.dynamicdrive.com/
这里很有用的，常去看看吧。国内的都是从外国学回来的。
[回复]
这个以后估计会成为使用圆角按钮的标准配置 [smile]
[回复]
[...] 这样做好不好： 图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。 大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。 [...]
为啥一定是float呢?
不太明白~~
[回复]
A标签是内联元素。宽、高边距等属性不能设置
float则可以使其脱离普通文档流，定义宽高等属性
[回复]
这种方式挺灵活的！～！我们也常用的！呵呵！～！
[回复]
这样做挺灵活的！～！我也常用！～呵呵！～！各有利弊吧！～！比如所需尺寸比较多的时候就适合用你的办法了！～！～
[回复]
很灵活，应该是滑动门技术的另外一种应用。学习了…….
[回复]
[...] 以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。 [...]
非常有用，收藏
[回复]