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

公告

联系我：lightory(at)gmail.com
我的足迹：豆瓣、Twitter、Last.fm、Caimai、GReader

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

2010/02/17 Tags:CSS,Front-End 27 Comments 1,494 Views

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

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

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

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

下面是一些简单的示例。

基本使用：

<a class="sexybutton" href="#"><span><span>提交</span></span></a>
<button class="sexybutton"><span><span>取消</span></span></button>

提交

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

<a class="sexybutton" href="#"><span><span><span class="ok">提交</span></span></span></a>
<button class="sexybutton"><span><span><span class="cancel">取消</span></span></span></button>

Submit

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

<a class="sexybutton" href="#"><span><span>Normal Button</span></span></a>
<a class="sexybutton sexymedium" href="#"><span><span>Medium Button</span></span></a>
<a class="sexybutton sexylarge" href="#"><span><span>Large Button</span></span></a>

Normal Button Medium Button Large Button

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

<button class="sexybutton sexyorange"><span><span><span class="ok">Orange Button</span></span></span></button>
<button class="sexybutton sexyyellow"><span><span><span class="ok">Yellow Button</span></span></span></button>
<button class="sexybutton sexysimple"><span class="ok">Simple Button</span></button>

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

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

27 条评论

Orchid 说：

2010/02/17于20:07

shafa

回复
- LiGht 说：
  
  2010/02/17于22:23
  
  “又是这种没营养的回复”
  
  回复
  - Orchid 说：
    
    2010/02/17于22:24
    
    哪里“又”了！
    
    回复
    - LiGht 说：
      
      2010/02/17于22:25
      
      要完整引用，不然是对偶像的不敬。
      
      回复
zwwooooo 说：

2010/02/17于23:45

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

回复
- LiGht 说：
  
  2010/02/18于13:02
  
  迟早的事儿~在那之前，就渐进增强好了。
  
  回复
- 怡红公子说：
  
  2010/02/25于19:37
  
  我记得有个主题在IE下也可以显示radius，貌似是利用了图片……
  
  回复
  - zwwooooo 说：
    
    2010/02/25于21:41
    
    图片 – - 这里说的是 css3 的 radius 属性，呵呵
    
    回复
    - 怡红公子说：
      
      2010/02/27于02:23
      
      = =所以我说是在IE下么……= =据我所知IE不显示radius的吧……嘿嘿～
      
      回复
      - zwwooooo 说：
        
        2010/02/27于11:08
        
        所以我说“要是所有浏览器都支持radius就好了” – -
    - 怡红公子说：
      
      2010/02/27于16:29
      
      所以偶也只是提提而已……
      
      回复
HJin_me 说：

2010/02/18于12:38

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

回复
- LiGht 说：
  
  2010/02/18于13:03
  
  有导入 CSS 文件么？还有路径什么的确认下无误吧~
  
  回复
  - HJin_me 说：
    
    2010/02/18于13:07
    
    我指的是，我没有使用这款东西！！做得蛮好的！
    
    回复
纯粹说：

2010/02/19于19:47

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

回复
Hanjiyun 说：

2010/02/20于10:29

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

回复
WG 说：

2010/02/21于18:15

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

回复
- 怡红公子说：
  
  2010/02/25于19:38
  
  极度同意，python就因为跟个网站名字相同而已就被屏蔽了
  
  回复
ZH CEXO 说：

2010/02/22于22:20

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

回复
- LiGht 说：
  
  2010/02/22于22:24
  
  呵呵，还是你做的主题漂亮，我需要向你学习的~
  
  回复
  - ZH CEXO 说：
    
    2010/02/22于22:26
    
    哪里，我懒死了，创新意识也不行，大家相互学习啦，哈哈
    
    回复
笨笨说：

2010/02/23于11:49

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

回复
亿通网络传真说：

2010/02/23于13:16

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

回复
怡红公子说：

2010/02/25于19:39

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

回复
科士威说：

2010/03/10于16:02

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

回复
AnTony 说：

2010/03/17于08:42

申请连接，有机会交流！

回复
济南网站优化说：

2010/03/18于21:18

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

回复