buttons css手册,BUTTONS V. 2.0.0——CSS按钮库(示例代码)

1

2

3

4

5

Buttons库学习

6

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 Style19 *20 * The default values for the .button class21 */

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 Shapes55 *56 * This file creates the various button shapes57 * (ex. Circle, Rounded, Pill)58 */

59 .button-rounded{

60 border-radius:4px; }

61 /*

62 * Raised Buttons63 *64 * A classic looking button that offers65 * 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 Colors86 *87 * Create colors for buttons88 * (.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 Colors97 *98 * Create colors for raised buttons99 */

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

118

119

120 GO

121 Default-CSS

122

123