« chage&aska，我来了–updata | 招聘 交互设计师、网页设计师（已结束） »

[CSS]自适应宽度圆角按钮 11月 20th, 2007 5key Post in web开发 , , 3,195 views

本文遵循创作共用协议，转载请注明出处 5key.net
本文链接：

昨天群里大家讨论到一个豆瓣上的按钮，下面这个。在这里用到了不同宽度的按钮，但是只是用到了一个图片。
自适应宽度圆角按钮
演示地址：http://5key.net/demo/liquid-css-menu/ 

先来看张图片：
自适应宽度圆角按钮
原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok，看看代码吧。

下载: liquid-css-menu.html
  1. <style>                 
  2. *{margin:0; padding:0;}   
  3. body{padding:10px; font-size:12px;}     
  4. h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}     
  5. 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;}     
  6. a span{background:url(1.gif) right 0;  padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;}     
  7. a:hover span{background:url(1.gif) right -30px; color:#000;  padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px;  }
  8. </style>
  9.  
  10. <h1>CSS自适应宽度圆角按钮 @5key.net</h1>
  11. <a href="#"><span>首页</span></a>
  12. <a href="#"><span>不是首页</span></a>
  13. <a href="#"><span>他也许是首页</span></a>
  14. <a href="#"><span>但他一定不是首页</span></a>
  15. <a href="#"><span>好了，就这样把。别扯了~</span></a>
将此文推荐到鲜果热文。

您可能还会对这些文章感兴趣»

其他文章»

20 Responses to “[CSS]自适应宽度圆角按钮”

  1. tnzshare 11月 20th, 2007 Says:
    Gravatar

    谢谢收下了 [lol]

    [回复此评论]

  2. 愆伏 11月 20th, 2007 Says:
    Gravatar

    如果把图片弄成透明背景的，还可以做到换颜色~

    [回复此评论]

  3. dowhatyouwant 11月 20th, 2007 Says:
    Gravatar

    呵呵。。。确实

    [回复此评论]

  4. yang 11月 20th, 2007 Says:
    Gravatar

    如果文字超过背景图片的宽度，圆角背景就乱了。

    [回复此评论]

  5. dowhatyouwant 11月 20th, 2007 Says:
    Gravatar

    这里我只是做了一个小的测试。这个图片你可以无限长。
    当然，我们只需要一个相对比较大的值就行。毕竟按钮也不会是很长的文字

    [回复此评论]

  6. spacenet 11月 20th, 2007 Says:
    Gravatar

    这个按钮的方法最早好像在客齐集的头部按钮中就是这样做了!以前参考过!很方便!

    [回复此评论]

  7. 锐风 11月 21st, 2007 Says:
    Gravatar

    这个东西很好玩啊~太帅了哦~

    [回复此评论]

  8. 锐风 11月 21st, 2007 Says:
    Gravatar

    [cool] 哦~原来是这样啊!原来是多了个span..不用就不行了..看来不是太实用啊.. [rolleyes]

    [回复此评论]

  9. Justin 11月 30th, 2007 Says:
    Gravatar

    douban天天上，觉得这个按钮设计的不错。

    [回复此评论]

  10. dddddd 12月 5th, 2007 Says:
    Gravatar

    dddddd

    [回复此评论]

  11. evan 12月 10th, 2007 Says:
    Gravatar

    http://www.dynamicdrive.com/

    这里很有用的，常去看看吧。国内的都是从外国学回来的。

    [回复此评论]

  12. bunorte 12月 18th, 2007 Says:
    Gravatar

    这个以后估计会成为使用圆角按钮的标准配置 [smile]

    [回复此评论]

  13. » CSS切换图片效果 5key.net 1月 9th, 2008 Says:
    Gravatar

    […] 这样做好不好： 图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。 大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。 […]

  14. iamzhongshi 1月 10th, 2008 Says:
    Gravatar

    为啥一定是float呢?
    不太明白~~

    [回复此评论]

  15. 5key 1月 10th, 2008 Says:
    Gravatar

    为啥一定是float呢?
    不太明白~~

    A标签是内联元素。宽、高边距等属性不能设置
    float则可以使其脱离普通文档流，定义宽高等属性

    [回复此评论]

  16. yoyo2007 1月 14th, 2008 Says:
    Gravatar

    这种方式挺灵活的！～！我们也常用的！呵呵！～！

    [回复此评论]

  17. yoyo2007 1月 14th, 2008 Says:
    Gravatar

    这样做挺灵活的！～！我也常用！～呵呵！～！各有利弊吧！～！比如所需尺寸比较多的时候就适合用你的办法了！～！～

    [回复此评论]

  18. Yellow 2月 25th, 2008 Says:
    Gravatar

    很灵活，应该是滑动门技术的另外一种应用。学习了…….

    [回复此评论]

  19. 自适应的标题 | 5key’s blog 3月 18th, 2008 Says:
    Gravatar

    […] 以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。 […]

  20. thw 5月 16th, 2008 Says:
    Gravatar

    非常有用，收藏

    [回复此评论]

我有话说»