现代 CSS

Alexwolfe的Button库使用

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

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

Button库并不是简单的一个CSS制作的Button库,在这里alexwolfe大师采用了SASSCompass进行开发和维护的。或许有些同学看到这两个东东会觉得很蛋疼,不知道怎么使用,其实没有那么恐怖的,只要你略懂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——简易指南》。

确保你的电脑上已经安装了SASSCompass。如果您还未接触过这两个东东,也不知道如何安装的话,请您移步这里,轻松帮您安装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

Shop Nike Apparel, Shoes and Accessories

返回顶部