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>