使用Buttons库通过Sass和Compass库实现自定义按钮

2013-07-09 09:09:20  来源:w3cplus 

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

前几天在互联网上看到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库来实现自定义按钮。希望这篇文章对大家制作属于自己的按钮库有所帮助。

更多