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 样式库。
时间： 2024-11-01 10:49:07