|
1
|
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.7em 0.5em 0.7em 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-color:#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 |
} |