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

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

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

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

下面是一些简单的示例。

基本使用：

提交
取消

提交取消

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

提交
取消

SubmitCancel

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

Normal Button
Medium Button
Large Button

Normal ButtonMedium ButtonLarge Button

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

Orange Button
Yellow Button
Simple Button

Orange ButtonYellow ButtonSimple Button

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

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

Tags: CSS, Front-End

全书以技巧为主、理论为辅，介绍了许多 CSS 应用小技巧，如果忽略一些令人哭笑不得的术语翻译之外，这是一本难得的好书，十分适合进阶之用。

第九章《bug 和 bug 修复》，介绍了一些 CSS 调试的技巧，尤为实用。毕竟，与其授人以鱼，不若授人以渔。若不会自己研究、解决问题，就算你会用再多 CSS hack，遇到新 bug 时，也是白搭。

下面就加上我自己的一些理解，整理、总结如下：

0、使用更符合标准的浏览器

先使用更符合标准的浏览器（如 Firefox、Opera、Chrome 等）作为主要开发浏览器，页面显示正确后，再在能力较差的浏览器（如 IE）中进行兼容性测试。

1、进行 W3C 校验

遇到问题时，不要直接归罪于浏览器 bug，很多时候，问题源于你不规范的代码。尝试进行 W3C 校验，这能帮助你发现代码中的不规范之处。

当然，这不意味着必须做到 100% validate。W3C 验证只是一个参考标准，而不是必须无条件遵循的规则。

2、给相关元素加上边框

尝试隔离问题，识别症状，查明是什么导致了这个问题。隔离问题的方法之一是给相关元素加上边框，看它们的反应。

如果你使用 Firefox 作为开发浏览器，推荐 Web Developer 扩展，它可以方便地给指定元素加上边框，无需修改代码。除此之外，它还附带了许多其它的调试工具。

3、创建基本测试案例

如果问题比较棘手，可以创建基本测试案例（重现 bug 所需的最少 HTML/CSS ），去掉一些无关变量，使问题尽可能简单。

4、回避浏览器 bug

对于浏览器 bug，最简单的解决方案是——回避它。尝试使用其它方案实现相同的表现效果，实在没办法了再使用 CSS hack（这可能会留下隐患）。

Tags: CSS, Debug, Front-End