Buttons

基于 Sass 和 Compass 构建的CSS按钮(button)样式库

下载

Flat Buttons

<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-pill button-flat-primary">press me</a>
<a href="#" class="button button-flat-primary">press me</a>
<a href="#" class="button button-circle button-flat-primary">press me</a>

Icon Buttons (icons provided by Font Awesome. View the full list of icons)

<a href="#" class="button button-rounded button-flat"><i class="icon-github"></i></i> press me</a>
<a href="#" class="button button-rounded button-flat-primary"><i class="icon-refresh"></i> press me</a>
<a href="#" class="button button-rounded button-flat-action"><i class="icon-cloud"></i> press me</a>
<a href="#" class="button button-rounded button-flat-highlight"><i class="icon-camera"></i> press me</a>
<a href="#" class="button button-rounded button-flat-caution"><i class="icon-code"></i> press me</a>
<a href="#" class="button button-rounded button-flat-royal"><i class="icon-envelope-alt"></i> press me</a>

Glow Buttons

<a href="#" class="button glow button-rounded button-flat">press me</a>
<a href="#" class="button glow button-rounded button-flat-primary">press me</a>
<a href="#" class="button glow button-rounded button-flat-action">press me</a>
<a href="#" class="button glow button-rounded button-flat-highlight">press me</a>
<a href="#" class="button glow button-rounded button-flat-caution">press me</a>
<a href="#" class="button glow button-rounded button-flat-royal">press me</a>

Rounded Buttons

<a href="#" class="button button-rounded">press me</a>
<a href="#" class="button button-rounded button-primary">press me</a>
<a href="#" class="button button-rounded button-action">press me</a>
<a href="#" class="button button-rounded button-highlight">press me</a>
<a href="#" class="button button-rounded button-caution">press me</a>
<a href="#" class="button button-rounded button-royal">press me</a>

Pill Buttons

<a href="#" class="button button-pill">press me</a>
<a href="#" class="button button-pill button-primary">press me</a>
<a href="#" class="button button-pill button-action">press me</a>
<a href="#" class="button button-pill button-highlight">press me</a>
<a href="#" class="button button-pill button-caution">press me</a>
<a href="#" class="button button-pill button-royal">press me</a>

Square Buttons

<a href="#" class="button">press me</a>
<a href="#" class="button button-primary">press me</a>
<a href="#" class="button button-action">press me</a>
<a href="#" class="button button-highlight">press me</a>
<a href="#" class="button button-caution">press me</a>
<a href="#" class="button button-royal">press me</a>

Circle Buttons

<a href="#" class="button button-circle">press me</a>
<a href="#" class="button button-circle button-primary">press me</a>
<a href="#" class="button button-circle button-action">press me</a>
<a href="#" class="button button-circle button-highlight">press me</a>
<a href="#" class="button button-circle button-caution">press me</a>
<a href="#" class="button button-circle button-royal">press me</a>

Block Buttons

<a href="#" class="button button-block button-rounded button-primary button-large">press me</a>

Button Sizes

<a href="#" class="button button-rounded button-flat-primary button-large">press me</a>
<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-small">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a>

Button Wrappers

<span class="button-wrap"><a href="#" class="button button-circle">press me</a></span>
<span class="button-wrap"><a href="#" class="button button-circle button-primary">press me</a></span>
<span class="button-wrap"><a href="#" class="button button-pill ">press me</a></span>
<span class="button-wrap"><a href="#" class="button button-pill button-primary">press me</a></span>

Form Elements Work Too

<input type="submit" value="press me" class="button button-pill button-primary"/>
<button class="button button-pill button-primary">press me</button>

<!-- DISABLED BUTTONS -->
<input  disabled type="submit"  value="press me" class="button button-pill button-primary"/>
<button disabled class="button  button-pill button-primary">press me</button>
<a href="#" class="button disabled button-pill button-primary">press me</a>

使用帮助

安装 Buttons

  1. 下载 Buttons 并将文件导入到你的web项目中。
  2. 将css文件引入页面。
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/button.css">
    如果你希望使用字体图标的话,只需引入font-awesome的css文件即可。
  3. 接下来就可以在html中创建按钮了!

定制 Buttons

  1. 从Github Fork 或下载 Buttons 项目的源码。
  2. 确保已经安装了SassCompass
  3. 编辑 _options.scss
  4. 在 Buttons 项目的根目录下敲入 compass watch 命令。
  5. buttons.css 文件被修改之后就会自动更新了