顶部

Buttons V. 2.0.0

Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

下载
U A Unicorn UI Module www.unicorn-ui.com

形状与尺寸

多种形状和尺寸的按钮样式可供选择。

带边框和不带边框的按钮

Font Awesome 开源的图标字体非常适合移动设备

Buttons App

3D 按钮

模仿现实世界中的按钮外观

Check out the new site! Visit Us! Go Say Hi!

突起样式的按钮

经典的按钮外观

Visit Us! Go Say Hi! Say Hi!

长阴影

为按钮中的文字赋予扁平效果的阴影

光晕效果

按钮周围有一圈光晕效果

带下拉菜单的按钮

当按钮被点击时会出现一个下拉菜单

Select Me

按钮组

一组相关的按钮被并排排列

堆叠按钮

block 级别的按钮会占据最大宽度

Go Go Go Go Go Go

额外的环绕效果

为按钮周围增加额外视觉效果能够突出按钮

Go Go

表单按钮

Buttons 作为表单元素也是非常棒的

Go

各种文字样式

按钮中的文本可以有多种样式

uppercase lowercase capitalize small caps

语义与可访问性

使用 Buttons 时应当考虑可访问性。如果是链接到外部资源或内部页面的链接应当使用 链接 标签。如果是应用程序中的功能按钮,例如:添加到购物车,应当使用 button 标签。如果实在表单中使用,应当使用 input 标签(例如提交按钮)。如果你想深入了解这方面的知识,请参考下面列出的链接:

安装与设置

  1. 下载
  2. 将 Buttons 库载入页面

    Buttons Setup

      <!-- Buttons 库的核心文件 -->
      <link rel="stylesheet" href="css/buttons.css">
    
      <!-- 当需要使用带下拉菜单的按钮时才需要加载下面的 JavaScript 文件 -->
      <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
      <script type="text/javascript" src="js/buttons.js"></script>
    
      <!-- 只有使用字体图标时才需要加载 Font-Awesome -->
      <link href="https://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

从 1.0 升级到 2.0 版本

我们队 Buttons 库进行了很多重要升级。为了帮你将 Buttons 库集成到你的项目中,你需要进行如下修改:

  1. Compass 被替换为 [autoprefixer](https://github.com/postcss/autoprefixer)。 Compass 不再被推荐,但是仍然是被支持的。
  2. 按钮的颜色被完全独立出来(例如,button-primary),我们不再支持 button-flat-primary 类似的 class 了,现在只需要使用 button-flat button-primary 就可以了。
  3. 按钮的样式也是独立的(例如,button-flat、button-3d 等)。你可以将这些样式应用到按钮上,同时,为按钮设置的颜色也能同时起作用(例如,button-primary button-3d)。

定制 Buttons

  1. 克隆本项目源码
  2. 确保正确安装了 Node.js
  3. 打开命令行,进入 Buttons 的根目录
  4. 运行 npm installsudo npm install (根据你的系统权限来确定是否添加 sudo)。
  5. 在命令行中执行 grunt dev,将会打开一个浏览器窗口并且会打开 Buttons 文档页面
  6. 找到 scss 目录
  7. 通过修改 _options.scss 文件定义你自己的颜色、字体等
  8. 每当你保存修改后,前面打开的页面就会自动加载并展示出你修改后的效果!