Alexwolfe的Button库使用

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

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

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

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