Quantcast
Channel: w3cplus
Viewing all articles
Browse latest Browse all 1557
↧

Alexwolfe的Button库使用

July 8, 2013, 7:14 am
$
0
0

前几天在互联网上看到alexwolfe制作的Button库，觉得很有意思，特意花了些时间学习了一下这个库的源码与使用。今天花了点时间将期整理与大家分享。

Button库并不是简单的一个CSS制作的Button库，在这里alexwolfe大师采用了SASS和Compass进行开发和维护的。或许有些同学看到这两个东东会觉得很蛋疼，不知道怎么使用，其实没有那么恐怖的，只要你略懂CSS，就完全可以使用这个按钮库，大不了直接git下来他的CSS到你的项目中，这样也能使用，只不过你要按你的设计风格来调整就略会麻烦些。

接下来我们就不说太多的废话，先了简单的了解这个Button包含哪些东东吧，这才是大家最为关心和想知道的。

Buttons中主要包括以下几种按钮形状：

  • 默认按钮，使用类名“button”
  • "Rounded"按钮，使用类名“button-rounded”
  • "Flat"按钮，使用类名“button-flat”
  • "Pill"按钮，使用类名“button-pill”
  • "Circle"按钮，使用类名“button-circle”

Buttons中主要包括以下几种按钮大小：

  • 大按钮，使用类名"button-large"
  • 小按钮，使用类名“button-small”
  • 微小按钮，使用类名“button-tiny”

在Button中除了以上几种按钮类型之外，Buttons库中还有几种用来装饰性的按钮，例如，图标按钮、块按钮，外包按钮等。

Demo下载

效果如下图所示：

Buttons

Buttons的使用

要能正常的使用Buttons库，其实很简单，只要你按下面三个步骤执行，你就能正常的使用这个Buttons。

  • 下载Buttons库代码
  • 在你的项目页面的'<head></head>'调用下载下来的Buttons库中的CSS样式文件
  • 在你的项目页面中创建按钮的HTML标签

下载Buttons库源码

你可以直接到Buttons的官网上点击Download按钮下载，或者你可以到GitHub下载。并把下载下来的Buttons.zip文件解压缩，获取里面的样式代码文件buttons.css、font-awesome.min.css和获取里面的font字体库，并将这些文件直接插入到您的项目中。例如在我的项目中：

+ Buttons_project
+ ----css
+ --------buttons.css
+ --------font-awesome.min.css
+ ----font
+ --------fontawesome-webfont.eot
+ --------fontawesome-webfont.svg
+ --------fontawesome-webfont.ttf
+ --------fontawesome-webfont.woff
+ --------FontAwesome.otf
+ ----index.html

调用Buttons库文件

只下载文件下来，不调用也是无效的，至于如何调用Buttons的文件，这里简单的列出两种常见的调用方法，至于哪种好，哪种不好，大家自己识别。

link调用

使用<link>标签调用样式，很简单，你只需要在你的Web页中<head></head>中通过 <link>调用需要的两个样式文件：

<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/buttons.css" />

这现个样式文件，最好放在你自定义样式文件前面。

＠import调用

另外一种调用的方式，使用@import方式调用样式。使用这种方式调用样式文件，需要在你自定义样式文件中的开头，使用@import来调用样式：

/*在你自己定义样式文件，如style.css*/

@import 'font-awesome.min.css';
@import 'buttons.css'

HTML的使用规则

在Web中制作按钮，更多的时候是使用表单中的input[type="submit"]、 input[type="button"]或者button标签。除了这些标签之外，还常常使用<a>标签来制作。至于为什么？大家都懂的。当然，您还可以使用HTML中的其他标签来制作，比如说：<span>标签、<div>标签等等，只是使用这些标签从语义化的角度出发，不太完美，而且你还需要添加一些JavaScript来实现一些其他功能。

在这里我们不花太多的时间来纠结使用什么标签，我想大家更想知道的是使用Buttons库应该怎样在自己的项目中写结构，方便借用Buttons库直接生成按钮效果。

在实际项目是使用Buttons库，我们可以直接在HTML结构中使用下面的标签：

<a>我是一个按钮 </a>
<input type="submit" value="我是一个按钮" />
<button type="submit">我是一个按钮</button>

仅在您的项目中插入上面的HTML代和样式文件，在您浏览器中呈现的仅是一些普通的链接或者按钮，并不是您想要的。如果想要在您的浏览器中呈现Buttons库中的按钮风格，我们还有一个很关键的步骤——按需在您的元素中添加对应的按钮类名。

默认按钮风格

前面说过，只调用样式，无结构，也得不到想要的按钮；反之有结构，无样式，也同样得不到想要的按钮。在实际中就是这么现实，接下来我们分别来看看各种风格按钮的调用。

在Buttons库中，只要你加载了，并且在你的代码中调用了.button类名，你就能得到一个默认的按钮风格：

<a class="button">a标签按钮 </a>
<input type="submit" value="input标签按钮"class="button" />
<button type="submit"class="button">button标签按钮</button>

对应的CSS样式：

/*button的默认样式*/
.button {
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  background-color: #eeeeee;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1));
  background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
  background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
  background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
  background: linear-gradient(top, #fbfbfb, #e1e1e1);
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  border: 1px solid #d4d4d4;
  height: 32px;
  line-height: 32px;
  padding: 0px 25.6px;
  font-weight: 300;
  font-size: 14px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #666666;
  text-shadow: 0 1px 1px white;
  margin: 0;
  text-decoration: none;
  text-align: center;
}
 /*按钮悬浮状态*/
.button:hover {
  background-color: #eeeeee;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dcdcdc));
  background: -webkit-linear-gradient(top, #ffffff, #dcdcdc);
  background: -moz-linear-gradient(top, #ffffff, #dcdcdc);
  background: -o-linear-gradient(top, #ffffff, #dcdcdc);
  background: linear-gradient(top, #ffffff, #dcdcdc);
}
/*按钮点击状态*/
.button:active {
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
  background: #eeeeee;
  color: #bbbbbb;
}

注：上面代码是使用SASS转译出来的样式代码，所以在书写是没有考虑一些简写规范，另外其中box-shadow、border-radius在现代浏览器中已支持标准规范，不需要添加浏览器的私有属性。另外Gradient语法最近也有更新。

默认按钮效果，如下图所示：

Buttons中默认按钮

不过在’<button>‘和'input[type="submit"]'标签制作的按钮，需要对他高的设置另做一点处理，在这个库里，重置了他们的高度值：

input.button, 
button.button {
  height: 34px;/*在其他标签制作按钮高2px*/
  cursor: pointer;
}

如果您的按钮要处理禁用状态，让用户不能点击你的按钮，可以在类名中添加'disabled'类，如果是表单按钮，直接使用'disabled'属性：

<a class="button disabled">a标签按钮 </a>
<input type="submit" value="input标签按钮" class="button"disabled />
<button type="submit" class="button"disabled>button标签按钮</button>

对应的样式如下：

.button.disabled,
.button.disabled:hover,
.button.disabled:active,
input.button:disabled,
button.button:disabled {
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  background: #EEE;
  border: 1px solid #dddddd;
  text-shadow: 0 1px 1px white;
  color: #CCC;
  cursor: default;
}

效果如下图所示：

Buttons中禁用按钮

彩色按钮

默认的按钮仅是一种色彩，在这个多色世界中，他无法让你满足，那么需要一些其他的颜色来补充您的需求，在Buttons库中也是一样的，里面提供了几种不同颜色的按钮，其主要区别是通过类名来控制不同的颜色：

  • 色调一，使用类名'button-primary'，从“#00b5e5”渐变到“#008db2”;
  • 色调二，使用类名’button-action‘，从“#8fcf00”渐变到“#6b9c00”;
  • 色调三，使用类名'button-highlight'，从“#fa9915”渐变到“#d87e04”；
  • 色调四，使用类名'button-caution'，从“#eb6855”渐变到“#d9331a”;
  • 色调五，使用类名'button-royal'，从“#ab3eb2”渐变到“#752a79”。

在Buttons库中主要实现了五种颜色的效果，当然这几种颜色不能满足所有的设计需求，不过Buttons库中提供了自定义按钮（通过Sass来完成，稍后会介绍），你就可以轻松得到各种颜色风格按钮。同样，在每一种颜色风格下都供了对应的不同状态按钮风格。整个代码如下所示：

/*button-primary style*/
.button-primary {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00b5e5), color-stop(100%, #008db2));
  background: -webkit-linear-gradient(top, #00b5e5, #008db2);
  background: -moz-linear-gradient(top, #00b5e5, #008db2);
  background: -o-linear-gradient(top, #00b5e5, #008db2);
  background: linear-gradient(top, #00b5e5, #008db2);
  background-color: #00a1cb;
  border-color: #007998;
  color: white;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35);
}
.button-primary:hover {
  background-color: #00a1cb;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00c9fe), color-stop(100%, #008db2));
  background: -webkit-linear-gradient(top, #00c9fe, #008db2);
  background: -moz-linear-gradient(top, #00c9fe, #008db2);
  background: -o-linear-gradient(top, #00c9fe, #008db2);
  background: linear-gradient(top, #00c9fe, #008db2);
}
.button-primary:active {
  background: #1495b7;
  color: #005065;
}

/* button-action style */
.button-action {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8fcf00), color-stop(100%, #6b9c00));
  background: -webkit-linear-gradient(top, #8fcf00, #6b9c00);
  background: -moz-linear-gradient(top, #8fcf00, #6b9c00);
  background: -o-linear-gradient(top, #8fcf00, #6b9c00);
  background: linear-gradient(top, #8fcf00, #6b9c00);
  background-color: #7db500;
  border-color: #5a8200;
  color: white;
  text-shadow: 0 -1px 1px rgba(19, 28, 0, 0.35);
}

.button-action:hover {
  background-color: #7db500;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a0e800), color-stop(100%, #6b9c00));
  background: -webkit-linear-gradient(top, #a0e800, #6b9c00);
  background: -moz-linear-gradient(top, #a0e800, #6b9c00);
  background: -o-linear-gradient(top, #a0e800, #6b9c00);
  background: linear-gradient(top, #a0e800, #6b9c00);
}

.button-action:active {
  background: #76a312;
  color: #374f00;
}

/* button-highlight */
.button-highlight {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa9915), color-stop(100%, #d87e04));
  background: -webkit-linear-gradient(top, #fa9915, #d87e04);
  background: -moz-linear-gradient(top, #fa9915, #d87e04);
  background: -o-linear-gradient(top, #fa9915, #d87e04);
  background: linear-gradient(top, #fa9915, #d87e04);
  background-color: #f18d05;
  border-color: #bf7004;
  color: white;
  text-shadow: 0 -1px 1px rgba(91, 53, 2, 0.35);
}
.button-highlight:hover {
  background-color: #f18d05;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fba42e), color-stop(100%, #d87e04));
  background: -webkit-linear-gradient(top, #fba42e, #d87e04);
  background: -moz-linear-gradient(top, #fba42e, #d87e04);
  background: -o-linear-gradient(top, #fba42e, #d87e04);
  background: linear-gradient(top, #fba42e, #d87e04);
}
.button-highlight:active {
  background: #d8891e;
  color: #8d5303;
}

/* button-caution style */
.button-caution {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8543f), color-stop(100%, #d9331a));
  background: -webkit-linear-gradient(top, #e8543f, #d9331a);
  background: -moz-linear-gradient(top, #e8543f, #d9331a);
  background: -o-linear-gradient(top, #e8543f, #d9331a);
  background: linear-gradient(top, #e8543f, #d9331a);
  background-color: #e54028;
  border-color: #c22d18;
  color: white;
  text-shadow: 0 -1px 1px rgba(103, 24, 13, 0.35);
}
.button-caution:hover {
  background-color: #e54028;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eb6855), color-stop(100%, #d9331a));
  background: -webkit-linear-gradient(top, #eb6855, #d9331a);
  background: -moz-linear-gradient(top, #eb6855, #d9331a);
  background: -o-linear-gradient(top, #eb6855, #d9331a);
  background: linear-gradient(top, #eb6855, #d9331a);
}
.button-caution:active {
  background: #cd5240;
  color: #952312;
}

/* button-royal style */
.button-royal {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #99389f), color-stop(100%, #752a79));
  background: -webkit-linear-gradient(top, #99389f, #752a79);
  background: -moz-linear-gradient(top, #99389f, #752a79);
  background: -o-linear-gradient(top, #99389f, #752a79);
  background: linear-gradient(top, #99389f, #752a79);
  background-color: #87318c;
  border-color: #632466;
  color: white;
  text-shadow: 0 -1px 1px rgba(26, 9, 27, 0.35);
}
.button-royal:hover {
  background-color: #87318c;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ab3eb2), color-stop(100%, #752a79));
  background: -webkit-linear-gradient(top, #ab3eb2, #752a79);
  background: -moz-linear-gradient(top, #ab3eb2, #752a79);
  background: -o-linear-gradient(top, #ab3eb2, #752a79);
  background: linear-gradient(top, #ab3eb2, #752a79);
}
.button-royal:active {
  background: #764479;
  color: #3e1740;
}

效果如下所示：

Buttons中彩色按钮

按钮形状类型

在Buttons按钮库中还有一个特色，通过不同的类名实现不同的按钮形状。在平时的制作中，我们常见的按钮形状有圆角（小圆角，大圆角），还有圆形按钮。在这里通过三个不同的类名来实现不同的按钮形状：'button-rounded'、'button-pill'和’button-circle‘：

<a class="button">.button</a>
<a class="button button-rounded">.button-rounded</a>
<a class="button button-pill">.button-pill</a>
<a class="button button-circle">.button-circle</a>

样式在'.button-rounded'、'.button-pill'和'.button-circle'上定义不同的圆角大小，从而实现不同风格的按钮形状：

/* .button-rounded style */
.button-rounded {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

/* .button-pill style */
.button-pill {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
}

/* .button-circle style */
.button-circle {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  -o-border-radius: 240px;
  border-radius: 240px;
  -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  width: 120px;
  line-height: 120px;
  height: 120px;
  padding: 0px;
  border-width: 4px;
  font-size: 18px;
}

对于圆形按钮，其'border-radius'可设置值为“50%”，利于扩展，在不同圆形按钮下，都可以实现一个圆形。

效果如下图所示：

Buttons中彩色按钮

Flat按钮

今年是一个Flat Design流行年，很多网站的改变都趋于Flat Design。Buttons库也不示弱，在库中已扩展了Flat Design的按钮风格。在使用Flat按钮，只需要在button中添加一个类名’button-flat‘：

<a class="button button-flat">.button-flat</a>

Flat Design对应的样式代码如下：

.button-flat {
  -webkit-transition-property: background, color;
  -moz-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #e9e9e9;
  border: none;
  text-shadow: none;
}
.button-flat:hover {
  background: #fbfbfb;
}
.button-flat:active {
  background: #eeeeee;
  color: #bbbbbb;
}
.button-flat.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

在Flat Design按钮中，去掉了阴影、边框等渐变效果。具体效果如下所示：

Buttons中彩色按钮

同样的，在Flat Design按钮中，也可以通过类名’button-rounded‘、'button-pill'和'button-circle'实现。当然也可以通过添加不同类名来制作彩色按钮效果，和前面不同的是，在Flat Design按钮中是通过添加类名“button-flat-代表色彩的名”，比如“primary”对应的是’button-flat-primary‘;'action'对应的是'button-flat-action'，依此类推：

<!-- Flat design type -->
<a class="button button-flat">.button-flat</a>
<a class="button button-flat button-rounded">.button-rounded</a>
<a class="button button-flat button-pill">.button-pill</a>
<a class="button button-flat button-circle">.button-circle</a>

<!-- Flat design color for button -->
<a class="button button-flat button-flat-primary">.button-flat-primary</a>
<a class="button button-flat button-flat-action">.button-flat-action</a>
<a class="button button-flat button-flat-highlight">.button-flat-highlight</a>
<a class="button button-flat button-flat-caution">.button-flat-caution</a>
<a class="button button-flat button-flat-royal">.button-flat-royal</a>

Flat Design对应的颜色按钮样式代码如下所示：

/* button-flat-primary */
.button-flat-primary {
  -webkit-transition-property: background, color;
  -moz-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #00a1cb;
  color: white;
  text-shadow: none;
  border: none;
}
.button-flat-primary:hover {
  background: #00b5e5;
}
.button-flat-primary:active {
  background: #1495b7;
  color: #00647f;
}
.button-flat-primary.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* button-flat-action */
.button-flat-action {
  -webkit-transition-property: background, color;
  -moz-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #7db500;
  color: white;
  text-shadow: none;
  border: none;
}
.button-flat-action:hover {
  background: #8fcf00;
}
.button-flat-action:active {
  background: #76a312;
  color: #486900;
}
.button-flat-action.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* button-flat-highlight */
.button-flat-highlight {
  -webkit-transition-property: background, color;
  -moz-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #f18d05;
  color: white;
  text-shadow: none;
  border: none;
}
.button-flat-highlight:hover {
  background: #fa9915;
}
.button-flat-highlight:active {
  background: #d8891e;
  color: #a66103;
}
.button-flat-highlight.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*button-flat-caution*/
.button-flat-caution {
  -webkit-transition-property: background, color;
  -moz-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #e54028;
  color: white;
  text-shadow: none;
  border: none;
}
.button-flat-caution:hover {
  background: #e8543f;
}
.button-flat-caution:active {
  background: #cd5240;
  color: #ac2815;
}
.button-flat-caution.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* button-flat-royal */
.button-flat-royal {
  -webkit-transition-property: background, color;
  -moz-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #87318c;
  color: white;
  text-shadow: none;
  border: none;
}
.button-flat-royal:hover {
  background: #99389f;
}
.button-flat-royal:active {
  background: #764479;
  color: #501d53;
}
.button-flat-royal.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

其效果如下图所示：

Buttons中彩色按钮

按钮尺寸

按钮在实际应用中大小不可能是完全一样的，这样一来就涉及到按钮尺寸扩展功能。在Buttons库里就具有这样的扩展功能，默认情况之下按钮大小是一个中等尺寸，在这个尺寸的基础上向上浮了一个点变成大按钮，向下浮了两个点，小按钮和超小按钮。为了方便调用不同尺寸的按钮，在Buttons中使用不同的类名来实现，大按钮使用类名button-large，小按钮使用类名button-small和超小按钮使用类名button-tiny。

<a class="button button-rounded button-large">.button-large</a>
<a class="button button-rounded ">.button</a>
<a class="button button-rounded button-small">.button-small</a>
<a class="button button-rounded button-tiny">.button-large</a>

在设计按钮尺寸时，Buttons库并没有做过多的修改，只是重置了按钮的高度和行高：

/* button-large */
.button-large {
  font-size: 19px;
  height: 38.4px;
  line-height: 38.4px;
  padding: 0px 30.72px;
}

input.button-large, 
button.button-large {
  height: 40.4px;
}
/* button-small */
.button-small {
  font-size: 12px;
  height: 25.6px;
  line-height: 25.6px;
  padding: 0px 20.48px;
}

input.button-small, 
button.button-small {
  height: 27.6px;
}

/* button-tiny */
.button-tiny {
  font-size: 11px;
  height: 22.4px;
  line-height: 22.4px;
  padding: 0px 17.92px;
}

input.button-tiny, 
button.button-tiny {
  height: 24.4px;
}

其效果如下图所示：

Buttons中彩色按钮

其他按钮风格

在Buttons库中除了上述的几种按钮风格之外，还有其他几种按钮风格，比如说块按钮、icon按钮和按钮外添加一些装饰效果。

块状按钮

默认状态下，按钮是一个行内块状的模式，但有很多时间，需要按钮的宽度能自适应于容器的宽度，这个时候我们就需要一个长按钮。在Buttons库中，实现这种风格的按钮，只需要在类中添加类名：button-block。

<a class="button button-rounded button-block">.button-block</a>

对应的设置button-block的样式：

.button-block {
  display: block;
}

效果如下图所示：

Buttons中彩色按钮

发光按钮

Buttons中还使用CSS3的Animation属性，制作了一个外圈发光按钮。使用方法有前面介绍的类似，只需要给结构中添加类名：glow:

<a class="button button-rounded glow">.glow</a>

发光按钮有一个关键样式，先要使用keyframes定义一个动画，然后通过animation将定义好的动画引用到样式中：

@keyframes glowing {
  from {
    box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
  to {
    box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
}

注：为了节省篇幅，上面只写了一个标准用法，如果你需要兼容所有现代浏览器，需要在添加各浏览器的私有属性：-webkit-　、-moz-、-o-　和 -ms-。

定义好动画后，在.glow引用这个动画：

.button.glow {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -khtml-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: glowing;
  -khtml-animation-name: glowing;
  -moz-animation-name: glowing;
  -ms-animation-name: glowing;
  -o-animation-name: glowing;
  animation-name: glowing;
}

.button.glow:active {
  -webkit-animation-name: none;
  -moz-animation-name: none;
  -ms-animation-name: none;
  -o-animation-name: none;
  animation-name: none;
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
}

其效果如下图所示：

Buttons中彩色按钮

有外圈的按钮

给按钮周围添加一个外圈，用来装饰按钮。实现这种按钮效果，需要结构做一定的调整：

<span class="button-wrap"><a href="#" class="button button-circle">周边加圈</a></span>
<span class="button-wrap"><a href="#" class="button button-circle button-primary">周边加圈</a></span>
<span class="button-wrap"><a href="#" class="button button-pill ">周边加圈</a></span>
<span class="button-wrap"><a href="#" class="button button-pill button-primary">周边加圈</a></span>

然后给容器button-wrap设置一个样式：

.button-wrap {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3e3e3), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #e3e3e3, #f2f2f2);
  background: -moz-linear-gradient(top, #e3e3e3, #f2f2f2);
  background: -o-linear-gradient(top, #e3e3e3, #f2f2f2);
  background: linear-gradient(top, #e3e3e3, #f2f2f2);
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
  padding: 10px;
  display: inline-block;
}

效果如下图所示：

Buttons中彩色按钮

Icon按钮

制作ICON按钮是时常有的事情，在Buttons库中同样也有这样的效果。在整个Buttons库中制作ICON按钮也是使用@font-face制作字体图标。其中也是采用了著名字体库Font Awesome。

<a class="button button-rounded"><i class="icon-github"></i>Github</a>

至于如何使用Font Awesome实现ICON图标，可以详细参阅Font Awesome官网。当然你在查阅如何实现ICON图标，你还需要知道@font-face属性的使用方法。如果你对这个属性感兴趣，可以点击这里。

自定义Buttons

如果你阅读到这里的时候，你或许会说，这Button制作的是很不错，很靓，可我的项目中颜色之类，大小之类和这个不太一致，想用也用不上，怎么办？其实不用太担心，在这个Buttons库中，我们可以自定义Buttons。

自定义Buttons的步骤

自定义Buttons使用的不是在线工具，也不是第三方插件，而是使用的CSS预处理器语言——SASS。使用Sass我们可以很轻量的根据Buttons提供的一些变量参数，生成我们需要的按钮。其实现主要有以下几步：

从Github上将Buttons库客隆下来。如果您还不了解如何客隆，可以参阅——《Git——简易指南》。

确保你的电脑上已经安装了SASS和Compass。如果您还未接触过这两个东东，也不知道如何安装的话，请您移步这里，轻松帮您安装Sass，装完SASS之后，你需要把compass安装好。如果这些东东对你来说有一定的难度，你可以考虑使用第三方插件。

安装好Sass和Compass，你就可以直接来编辑Buttons库中的_options.css这个变量文件，根据自己的需求重新定义变量：

//基本样式变量
$namespace: '.button'; //定义类名
$glow_namespace: '.glow';//发光按钮类似
$glow_color: #2c9adb;//定义发光颜色
$bgcolor: #EEE;//定义背景色
$height: 32px;//定义按钮高度

//排版变量
$font-color: #666;//定义前景色
$font-size: 14px;//定义字号
$font-weight: 300;//定义文字粗细
$font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;//定义字体

//按钮参数

// 定义你喜欢的背景色和前景色
$button_actions: ('primary' #00A1CB #FFF) ('action' #7db500 #FFF) ('highlight' #F18D05 #FFF)('caution' #E54028 #FFF) ('royal' #87318C #FFF);
$button_styles: 'rounded''pill''circle';//定义按钮形状
$button_sizes: 'large''small''tiny';//定义按钮大小
$circle-size: 120px; //定义圆形按钮大小

//下接按钮变量参数
$dropdown-background: #fcfcfc;
$dropdown-link-color: #333;
$dropdown-link-hover: #FFF;
$dropdown-link-hover-background: #3c6ab9;

根据自己需求，修改好_options.scss后，在命令行中运行Compass的watch命令，将代码转译出来。详细转译SASS代码，可以参阅——SASS编译。

经过转译之后，需要的buttons.css就已更新，这个时候你按前面的方法使用buttons.css你就可以轻松得到你自定义后的按钮。

要通过SASS来自定义自己需要的Buttons，您需要具备一些SASS的基本知识，这样你才能根据自己需求去修改Buttons库的SASS文件。

总结

本文从实用的角度出发，主要介绍了如何在实际项目中使用Buttons库，并且简章介绍了通过Sass和Compass库来实现自定义按钮。希望这篇文章对大家制作属于自己的按钮库有所帮助。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/alexwolfe-buttons.html

↧
Search
Viewing all articles
Browse latest Browse all 1557

Trending Articles

我的去 Google 化的安卓之旅

April 1, 2019, 10:34 pm

アイカツ！/ 偶像活动 / 偶像學園 / 星夢學園 / Aikatsu！TV001-178 MOVIE x3 SP x1 FIN BD-BOX (BD...

September 29, 2024, 9:39 am

【查】土星在第二宫的表现 (豆瓣 草菇@占星社区小组)

January 26, 2017, 6:20 am

科盟總座李鳳寧 智慧工廠建廠專家

September 12, 2017, 6:28 am

RAV4 E-Mirror電子式後視鏡無法連線

October 6, 2023, 7:30 am

[攻略] 《魔獸世界》6.2.2 稻草人皮皮萌樣現身！歡樂萬鬼節更新物品與入手說明

November 9, 2015, 7:47 am

走过路过别错过，大学生小团队接游戏外包（我们做过一年的小外包了），价格亲民，给钱就干，此条长期有效（我们的理想就是做个🐮的游戏工作室）

December 3, 2023, 3:47 pm

出售: atd capriccio continuo admonitor submonitor mk

May 4, 2018, 2:22 am

Chojushin Gravion_超重神1080p BDRip x264 FLAC-DECAY

January 20, 2014, 10:09 am

android .abb 包无法运行

October 13, 2021, 12:19 am

OCS: Missing key Unload, context <UEFI>! 是几个意思？

November 2, 2024, 7:46 am

辜莞允私密照又外泄？ 短裙照惊见「露毛」

December 15, 2016, 10:25 pm

慈濟願景、使命與核心價值

July 16, 2019, 2:01 am

imagex 的使用教學介紹 –擷取、修改及套用映像

June 23, 2016, 2:56 am

XC60 T5 換原廠換正時皮帶,連同12萬公里保養,報價驚人啊!

March 15, 2017, 10:57 pm

Winsoft ComPort for Android USB Serial v3.8(直接下载) [含附件]

July 20, 2024, 3:07 am

[下載]AutoCAD SCR腳本新增AutoCAD典型工作區

October 21, 2019, 10:52 pm

出售: 調速搖擺機 (EVERTOP 寶麗牌)

January 5, 2013, 4:12 pm

IOS 音频不播放 uni.createInnerAudioContext

August 5, 2020, 7:46 am

QFN及BTC散熱墊焊接空洞的3個形成原因及5個可能解決方案

June 21, 2022, 5:21 pm
More Pages to Explore .....
Search