Alexwolfe的Button库使用

作者：大漠 日期：2013-07-08 点击：1506
button
会员专栏

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

前几天在互联网上看到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), 0p
剩余80%内容付费后可查看

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

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部