公告

Sexy Buttons – 快速制作漂亮的 Web 按钮

2010/02/17 Tags:, 28 Comments 5,060 Views

作为 Web 界面基本元素之一，按钮有着非常重要的作用。多数浏览器的默认按钮样式都十分简陋，想要制作精致一点的按钮又颇费功夫。

想要快速制作漂亮的 Web 按钮？不妨试试 Sexy Buttons。

Sexy Buttons

Sexy Buttons 是一个基于 HTML/CSS 的框架（其实就是一个 CSS 文件和一些图标），其特性如下：

  • 不使用 JavaScript，纯 CSS
  • 支持使用 <button> 或 <a> 标签
  • 支持多种状态： normal, hover/focus, active, and disabled.
  • 通过改变 HTML 标签的 class，可以制作出多种风格不同的按钮

下面是一些简单的示例。

基本使用：

提交

提交

加上图标：在最内层添加一个带有特殊 class 的 span 标签，或者直接通过 img 标签添加图标（Sexy Buttons 自带有上千个图标）。

提交

Submit

改变尺寸：给外层标签添加特殊的 class

Normal Button
Medium Button
Large Button

Normal ButtonMedium ButtonLarge Button

改变样式：给外层标签添加特殊的 class

更多的使用方法，可以参见其官方演示，或者直接阅读 sexybutton.css 文件。另外，根据实际需要，你也可以方便地对 Sexy Buttons 进行扩展。

我很喜欢 Sexy Buttons 所暗含的 Web 界面元素组件化的思想。

无觅相关文章插件，快速提升流量

28 条评论 立即发表评论

  1. Orchid 说道：
    2010/02/17 20:07

    shafa

    回复
  2. zwwooooo 说道：
    2010/02/17 23:45

    Sexy引我过来的，要是所有浏览器都支持radius就好了

    回复
  3. HJin_me 说道：
    2010/02/18 12:38

    代码都下载了，不过没有用！

    回复
  4. 纯粹 说道：
    2010/02/19 19:47

    哈，这个看起来很不错额，试一下

    回复
  5. Hanjiyun 说道：
    2010/02/20 10:29

    在ie 6 下还是有点问题的。:-(

    回复
  6. WG 说道：
    2010/02/21 18:15

    可以预见的是——
    不改这个名字，迟早被伟大的石头堆砌物或者多事的广告屏蔽软件屏蔽掉

    回复
  7. ZH CEXO 说道：
    2010/02/22 22:20

    好久没来啊，改观真大，这个主题真不错，这篇文章也很受用
    新年新气象~

    回复
  8. 笨笨 说道：
    2010/02/23 11:49

    非常喜欢你博客的配色，蓝色的最爱，不过在ie6下面有点点错位。

    回复
  9. 亿通网络传真 说道：
    2010/02/23 13:16

    我是来学习的.欢迎大家去我的站参考

    回复
  10. 怡红公子 说道：
    2010/02/25 19:39

    我记得当初是看到说不用图片只用CSS做的按钮的，结果下下来貌似还是用了图片嘛……不过很喜欢那个simple黑色的～呵呵

    回复
  11. 科士威 说道：
    2010/03/10 16:02

    博客的配色，蓝色的最爱，不过在ie6下面有点点错位。

    回复
  12. AnTony 说道：
    2010/03/17 08:42

    申请连接，有机会交流！

    回复
  13. 济南网站优化 说道：
    2010/03/18 21:18

    一丝真情胜过千两黄金，一丝温暖能抵万里寒霜，一声问候送来温馨甜蜜，一条短信捎去我万般心意，忙碌的日子好好照顾自己。济南网站优化(www.shuoseo.com )

    回复
  14. alswl 说道：
    2010/08/28 21:18

    在翻GR Stared时候又翻到这里
    托你的福，毕设里面用了这个项目，效果很好

    回复

发表评论...