1 | /** ****************************************************************** **/ |
---|
2 | /** http://particletree.com/features/rediscovering-the-button-element/ **/ |
---|
3 | /** ****************************************************************** **/ |
---|
4 | |
---|
5 | /* BUTTONS */ |
---|
6 | |
---|
7 | .buttons a, .buttons button { |
---|
8 | display:block; |
---|
9 | float:left; |
---|
10 | margin:0 11px 0 0; |
---|
11 | background-color:#f5f5f5; |
---|
12 | border:1px solid #dedede; |
---|
13 | border-top:1px solid #eee; |
---|
14 | border-left:1px solid #eee; |
---|
15 | |
---|
16 | font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; |
---|
17 | font-size:100%; |
---|
18 | line-height:130%; |
---|
19 | text-decoration:none; |
---|
20 | font-weight:bold; |
---|
21 | color:#565656; |
---|
22 | cursor:pointer; |
---|
23 | padding:5px 10px 6px 7px; /* Links */ |
---|
24 | } |
---|
25 | .buttons button{ |
---|
26 | width:auto; |
---|
27 | overflow:visible; |
---|
28 | padding:4px 6px 3px 6px; /* IE6 */ |
---|
29 | } |
---|
30 | .buttons button[type]{ |
---|
31 | padding:5px 10px 5px 7px; /* Firefox */ |
---|
32 | line-height:17px; /* Safari */ |
---|
33 | } |
---|
34 | *:first-child+html button[type]{ |
---|
35 | padding:4px 10px 3px 7px; /* IE7 */ |
---|
36 | } |
---|
37 | .buttons button img, .buttons a img{ |
---|
38 | margin:0 3px -3px 0 !important; |
---|
39 | padding:0; |
---|
40 | border:none; |
---|
41 | width:16px; |
---|
42 | height:16px; |
---|
43 | } |
---|
44 | |
---|
45 | |
---|
46 | /* STANDARD */ |
---|
47 | |
---|
48 | button:hover, .buttons a:hover{ |
---|
49 | background-color:#dff4ff; |
---|
50 | border:1px solid #c2e1ef; |
---|
51 | color:#336699; |
---|
52 | } |
---|
53 | .buttons a:active{ |
---|
54 | background-color:#6299c5; |
---|
55 | border:1px solid #6299c5; |
---|
56 | color:#fff; |
---|
57 | } |
---|
58 | |
---|
59 | /* POSITIVE */ |
---|
60 | |
---|
61 | button.positive, .buttons a.positive{ |
---|
62 | color:#529214; |
---|
63 | } |
---|
64 | .buttons a.positive:hover, button.positive:hover{ |
---|
65 | background-color:#E6EFC2; |
---|
66 | border:1px solid #C6D880; |
---|
67 | color:#529214; |
---|
68 | } |
---|
69 | .buttons a.positive:active{ |
---|
70 | background-color:#529214; |
---|
71 | border:1px solid #529214; |
---|
72 | color:#fff; |
---|
73 | } |
---|
74 | |
---|
75 | /* NEGATIVE */ |
---|
76 | |
---|
77 | .buttons a.negative, button.negative{ |
---|
78 | color:#d12f19; |
---|
79 | } |
---|
80 | .buttons a.negative:hover, button.negative:hover{ |
---|
81 | background:#fbe3e4; |
---|
82 | border:1px solid #fbc2c4; |
---|
83 | color:#d12f19; |
---|
84 | } |
---|
85 | .buttons a.negative:active{ |
---|
86 | background-color:#d12f19; |
---|
87 | border:1px solid #d12f19; |
---|
88 | color:#fff; |
---|
89 | } |
---|
90 | |
---|
91 | /* DISABLE */ |
---|
92 | |
---|
93 | .buttons a.disable, .buttons a.disable:hover, .buttons button.disable, .buttons button.disable:hover |
---|
94 | { |
---|
95 | background-color:#CCCCCC; |
---|
96 | border:1px solid #dedede; |
---|
97 | color:#565656; |
---|
98 | } |
---|
99 | |
---|