|
.button, .button span { |
|
display: inline-block; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
} |
|
.button { |
|
white-space: nowrap; |
|
line-height:1em; |
|
position:relative; |
|
outline: none; |
|
overflow: visible; /* removes extra side padding in IE */ |
|
cursor: pointer; |
|
border: 1px solid #999;/* IE */ |
|
border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */ |
|
border-bottom:rgba(0, 0, 0, .4) 1px solid; |
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); |
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); |
|
box-shadow: 0 1px 2px rgba(0,0,0,.2); |
|
background: -moz-linear-gradient( |
|
center top, |
|
rgba(255, 255, 255, .1) 0%, |
|
rgba(0, 0, 0, .1) 100% |
|
);/* FF3.6 */ |
|
background: -webkit-gradient( |
|
linear, |
|
center bottom, |
|
center top, |
|
from(rgba(0, 0, 0, .1)), |
|
to(rgba(255, 255, 255, .1)) |
|
);/* Saf4+, Chrome */ |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */ |
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */ |
|
-moz-user-select: none; |
|
-webkit-user-select:none; |
|
-khtml-user-select: none; |
|
user-select: none; |
|
margin-bottom:10px; |
|
} |
|
.button.full, .button.full span { |
|
display: block; |
|
} |
|
.button:hover, .button.hover { |
|
background: -moz-linear-gradient( |
|
center top, |
|
rgba(255, 255, 255, .2) 0%, |
|
rgba(255, 255, 255, .1) 100% |
|
);/* FF3.6 */ |
|
background: -webkit-gradient( |
|
linear, |
|
center bottom, |
|
center top, |
|
from(rgba(255, 255, 255, .1)), |
|
to(rgba(255, 255, 255, .2)) |
|
);/* Saf4+, Chrome */ |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */ |
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */ |
|
} |
|
.button:active, .button.active { |
|
top:1px; |
|
} |
|
.button span { |
|
position: relative; |
|
color:#fff; |
|
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25); |
|
border-top: rgba(255, 255, 255, .2) 1px solid; |
|
padding:0.6em 1.3em; |
|
line-height:1em; |
|
text-decoration:none; |
|
text-align:center; |
|
white-space: nowrap; |
|
} |
|
|
|
// Font sizes |
|
.button.small span { |
|
font-size:12px; |
|
} |
|
.button.medium span { |
|
font-size:14px; |
|
} |
|
.button.large span { |
|
font-size:18px; |
|
} |
|
|
|
// Button Colors |
|
.button.black { |
|
background-color: #333333; |
|
} |
|
.button.gray { |
|
background-color: #666666; |
|
} |
|
.button.white { |
|
background-color: #FFFFFF; |
|
} |
|
.button.white span{ |
|
color: #666666; |
|
} |
|
.button.red { |
|
background-color: #e62727; |
|
} |
|
.button.orange { |
|
background-color: #ff5c00; |
|
} |
|
.button.magenta { |
|
background-color: #A9014B; |
|
} |
|
.button.yellow { |
|
background-color: #ffb515; |
|
} |
|
.button.blue { |
|
background-color: #00ADEE; |
|
} |
|
.button.pink { |
|
background-color: #e22092; |
|
} |
|
.button.green { |
|
background-color: #91bd09; |
|
} |
|
.button.rosy { |
|
background-color: #F16C7C; |
|
} |
|
.button.brown { |
|
background-color: #804000; |
|
} |
|
.button.purple { |
|
background-color: #800080; |
|
} |
|
.button.cyan { |
|
background-color: #46C7C7; |
|
} |
|
.button.gold { |
|
background-color: #D4A017; |
|
} |