source: ether_2012/trunk/web/resources/css/button.css @ 352

Last change on this file since 352 was 352, checked in by vmipsl, 12 years ago

box, shadow, ...

File size: 2.8 KB
Line 
1/** ****************************************************************** **/
2/** http://particletree.com/features/rediscovering-the-button-element/ **/
3/** ****************************************************************** **/
4
5button {
6    -moz-border-radius: 4px 4px 4px 4px;
7    -webkit-border-radius: 4px 4px 4px 4px;
8
9    display: block;
10    float: left;
11    margin: 0 11px 0 0;
12    background-color: #f5f5f5;
13    border: 1px solid #dedede;
14    border-top: 1px solid #eee;
15    border-left: 1px solid #eee;
16
17    font-family: Trebuchet MS, Arial, san-serif;
18    text-decoration: none; /*color: #565656;*/
19    cursor: pointer;
20
21    width: auto;
22    overflow: visible;
23    padding: 4px 6px 3px 6px; /* IE6 */
24}
25
26button[type] {
27    padding: 5px 10px 5px 7px; /* Firefox */
28    line-height: 17px; /* Safari */
29}
30
31*:first-child+html button[type] {
32    padding: 4px 10px 3px 7px; /* IE7 */
33}
34
35.small {
36    font-size: 80%;
37}
38
39button img {
40    margin: 0 3px -3px 0 !important;
41    padding: 0;
42    border: none;
43    width: 16px;
44    height: 16px;
45}
46
47/* STANDARD */
48button:hover, .button.gray_button:hover {
49    background-color: #81A0C3 !important;
50    border: 1px solid #c2e1ef;
51    color: white !important;
52}
53
54/* POSITIVE */
55button.positive {
56    background-color: #F0FFF0;
57    color: #529214;
58}
59
60button.positive:hover {
61    background-color: #E6EFC2;
62    border: 1px solid #C6D880;
63    color: #529214;
64}
65
66/* NEGATIVE */
67button.negative {
68    color: #d12f19;
69}
70
71button.negative:hover {
72    background: #fbe3e4;
73    border: 1px solid #fbc2c4;
74    color: #d12f19;
75}
76
77/* DISABLE */
78button.disable, button.disable:hover {
79    background-color: #CCCCCC;
80    border: 1px solid #dedede;
81    color: #565656;
82}
83
84/* ********************* BLUE BUTTON ********************* */
85button.blue_button {
86    background-image: url("../images/elements/button_middle_3.png");
87    background-repeat: repeat-x;
88    height: 39px;
89    float: right;
90    margin-right: 0;
91    border: 0;
92}
93
94.blue_button_text, .big_blue_button_text {
95    color: white;
96    font-size: 11px;
97    font-weight: bold;
98}
99
100button.big_blue_button {
101    background-image: url("../images/elements/big_button_middle_3.png");
102    background-repeat: repeat-x repeat-y;
103    height: 50px;
104    width: 50px;
105    float: right;
106    margin-right: 0;
107    border: 0;
108}
109
110.big_blue_button_text {
111    position: relative;
112    top: -3px;
113    font-size: 44px;
114}
115
116/* ********************* GRAY BUTTON ********************* */
117button.gray_button {
118    background-color: transparent;
119    border: hidden;
120    height: 31px;
121    float: right;
122    margin-right: 0;
123    position: relative;
124    top: -1px;
125}
126
127.gray_button_text {
128    color: gray;
129    font-size: 11px;
130    font-weight: bold;
131}
132
133.gray_button_text:hover {
134    color: white;
135}
136
137button.action_button {
138    margin-left: 5px;
139    margin-right: -3px;
140}
Note: See TracBrowser for help on using the repository browser.