BUTTONS V. 2.0.0——CSS按钮库
BUTTONS-V2-CSS库样式职责
CSS库样式职责分离优点
模块样式命名更清晰化
易于维护、扩展性强
动画效果——修改样式后有过度效果，默认样式
源码如下
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Buttons库学习</title>
6 <style type="text/css">
7 body { 8 margin: 0;
9 padding: 0;
10 font-family: "microsoft yahei";
11
12 }
13 a { 14 text-decoration: none;
15 outline: none;
16 }
17 /*
18 * Base Button Style
19 *
20 * The default values for the .button class
21 */
22 .button { 23 color: #666;
24 background-color: #EEE;
25 border-color: #EEE;
26 font-weight: 300;
27 font-size: 16px;
28 font-family: "microsoft yahei","Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
29 text-decoration: none;
30 text-align: center;
31 line-height: 40px;
32 height: 40px;
33 padding: 0 56px;
34 margin: 10px;
35 display: inline-block;
36 appearance: none;
37 cursor: pointer;
38 border: none;
39 -webkit-box-sizing: border-box;
40 -moz-box-sizing: border-box;
41 box-sizing: border-box;
42 -webkit-transition-property: all;
43 transition-property: all;
44 -webkit-transition-duration: .3s;
45 transition-duration: .3s; }
46
47 .button-large { 48 font-size: 20px;
49 height: 45px;
50 line-height: 45px;
51 padding: 0 45px; }
52
53 /*
54 * Button Shapes
55 *
56 * This file creates the various button shapes
57 * (ex. Circle, Rounded, Pill)
58 */
59 .button-rounded { 60 border-radius: 4px; }
61 /*
62 * Raised Buttons
63 *
64 * A classic looking button that offers
65 * great depth and affordance.
66 */
67 .button-raised { 68 border-color: #e1e1e1;
69 border-style: solid;
70 border-width: 1px;
71 line-height: 38px;
72 background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));
73 background: linear-gradient(#f6f6f6, #e1e1e1);
74 -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
75 box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); }
76 .button-raised:hover, .button-raised:focus { 77 background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
78 background: linear-gradient(top, white, gainsboro); }
79 .button-raised:active, .button-raised.active, .button-raised.is-active { 80 background: #eeeeee;
81 -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;
82 box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; }
83
84 /*
85 * Base Colors
86 *
87 * Create colors for buttons
88 * (.button-primary, .button-secondary, etc.)
89 */
90 .button-primary:hover, .button-primary:focus{ 91 background-color: #4cb0f9;
92 border-color: #4cb0f9;
93 color: #FFF; }
94
95 /*
96 * Raised Button Colors
97 *
98 * Create colors for raised buttons
99 */
100 .button-raised.button-primary {101 border-color: #088ef0;
102 background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0));
103 background: linear-gradient(#34a5f8, #088ef0); }
104 .button-raised.button-primary:hover, .button-raised.button-primary:focus {105 background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6));
106 background: linear-gradient(top, #42abf8, #0888e6); }
107
108 .button-highlight {109 background-color: #FEAE1B;
110 border-color: #FEAE1B;
111 color: #FFF; }
112 .button-highlight:hover, .button-highlight:focus {113 background-color: #fec04e;
114 border-color: #fec04e;
115 color: #FFF; }
116
117 </style>
118 </head>
119 <body>
120 <a href="#none" class="button button-raised button-primary">GO</a>
121 <a href="#none" class="button button-large button-highlight button-rounded">Default-CSS</a>
122 </body>
123 </html>参考资料 BUTTONSV. 2.0.0 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。
转载于:https://www.cnblogs.com/zjf-1992/p/5936897.html
BUTTONS V. 2.0.0——CSS按钮库相关推荐
- html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
- vant步进器传值_有赞开源的Vue 2.0 的 Mobile 组件库 Vant
有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量.可靠的移动端 Vue 组件库.包括了基础组件.Button 按钮.Cell 单元格.Icon 图标.Image 图片.Layo ...
- css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
- 使用CMake编译freeglut-3.0.0的静态库
之前写了为了编译此库自己搭工程,有读者抱怨这个库,说作者没有提供现成的工程,自己搭工程太麻烦.而咱在linux下尝试编译,发现没有configure文件,所以就按照作者推荐的CMake来制作Makef ...
- layer之弹层组件文档 layui.layer（v.1.9.0之后）
弹层组件文档 - layui.layer layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持.不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护.不断建设 ...
- ASP.NET 2.0中CSS失效的问题总结
ASP.NET 2.0中CSS失效的问题总结 Posted on 2007-09-02 12:34 上校 阅读(225) 评论(0) 编辑 收藏 所属分类: CSS, ASP.NET 经常有人遇到AS ...
- vue2.0桌面端框架_Element-UI组件库(Vue2.0桌面端组件库)V2.9.2 免费版
Element-UI组件库(Vue2.0桌面端组件库)是一款很优秀好用的为开发者.设计师和产品经理推出的基于Vue 2.0的桌面端组件库软件.小编带来的这款Element-UI组件库功能强大全面,简单 ...
- win10优化大师 v 1.0.0.8
软媒win10优化大师是一款针对win10系统的系统优化软件,有着软件管家.Win+X菜单管理.右键菜单快捷组.应用缓存清理.桌面显示图标等等多个常用功能,能更好的对用户的win10系统进行优化和清理 ...
- 仿微信6.0的界面按钮切换产生渐变效果
最近看了一个视频讲的是自定义个view模仿微信的四个菜单按钮切换时的颜色产生渐变的效果,最后实现出来感觉好不错所以我就做了总结希望对你们有用. 先看效果吧,不知道用什么软件来录制gif图你们就凑合看吧 ...
最新文章
- 4K观影体验需要网络端到端带宽50M-100M，时延RTT＜=20ms，丢包率PLR＜=3.4*10
- spring boot + vue + element-ui全栈开发入门——前后端整合开发
- 如何划分man文档的章节
- 【maven】Missing artifact javax.jms:jms:jar:1.1:compile
- 网状结构的解藕-中介者模式
- 【Linux】一步一步学Linux——sshd命令(177)
- mysql innodb引擎--范围查询优化
- 新建Acquisition contract出错的问题
- ubuntu11.10 samba服务器配置
- spring和mybatis的整合开发(基于MapperScannerConfigurer的整合开发（适用于复杂项目，接口较多的情况）)...
- servlet核心API的UML图
- 55 SD配置-定价配置-定义定价过程的条件排斥
- 第一次作业（构建之法8，16读后感）
- python绝对值_python的绝对值
- 传奇架设gom引擎常见问题
- 【蓝桥杯选拔赛真题30】Scratch小猫奔跑 少儿编程scratch蓝桥杯选拔赛真题讲解
- 详细总结卡尔曼滤波原理+具体案例分析
- 科大讯飞语音识别SDK的ROS包修改
- 2016中国方案商大会在京成功召开
- 我这样写python代码表白泡到了我的女神师姐