特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 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库中还有几种用来装饰性的按钮,例如,图标按钮、块按钮,外包按钮等。
效果如下图所示:
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
如需转载,烦请注明出处:https://www.w3cplus.com/css3/alexwolfe-buttons.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!