首页 > 代码库 > BUTTONS V. 2.0.0——CSS按钮库
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 样式库。
BUTTONS V. 2.0.0——CSS按钮库
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。