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