CSS
@font-face {
font-family: 'EntypoRegular';
src: url('font/entypo-webfont.eot');
src: url('font/entypo-webfont.eot?#iefix') format('embedded-opentype'), url('font/entypo-webfont.woff') format('woff'), url('font/entypo-webfont.ttf') format('truetype'), url('font/entypo-webfont.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.button, .button-bevel {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #fff;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 7px 20px 9px;
margin: .5em .5em .5em 0;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
-webkit-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-ms-transition: 0.1s linear;
-o-transition: 0.1s linear;
transition: 0.1s linear;
}
.button {
border-radius: 2px;
box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0;
}
.button:active {
box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;
}
.rounded {
border-radius: 20px;
}
.orange {
background: rgb(255,183,0);
background: -moz-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,183,0,1)), color-stop(100%, rgba(255,140,0,1)));
background: -webkit-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00', GradientType=0 );
border: 1px solid #e59500;
}
.orange:hover {
background: rgb(255,203,72);
background: -moz-linear-gradient(top, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,203,72,1)), color-stop(100%, rgba(255,156,35,1)));
background: -webkit-linear-gradient(top, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
background: -o-linear-gradient(top, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
background: -ms-linear-gradient(top, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
background: linear-gradient(to bottom, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23', GradientType=0 );
}
.button-bevel {
vertical-align: top;
border-radius: 4px;
border: none;
padding: 10px 25px 12px;
}
.button-bevel:active {
position: relative;
top: 5px;
}
.button-bevel.orange {
box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.orange:active {
box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}
.button-bevel.magenta {
box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.magenta:active {
box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}
.button-bevel.cyan {
box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.cyan:active {
box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}
.button-bevel.red {
box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.red:active {
box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}
.button-bevel.black {
box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}
.button-bevel.black:active {
box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}
.button-bevel.green {
box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.green:active {
box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}
.button span, .button-bevel span {
font-family: 'EntypoRegular';
font-size: 20px;
font-weight: normal;
vertical-align: middle;
line-height: 0;
margin-right: .1em;
}
.refresh:after {
content: "h";
font-size: 34px;
}
.shuffle:after {
content: "f";
font-size: 34px;
}
.preview:after {
content: "M";
font-size: 34px;
}
.tea:after {
content: "u";
font-size: 34px;
}
.wifi:after {
content: "T";
font-size: 34px;
}
.locator:after {
content: "0";
font-size: 34px;
}
.rss:after {
content: "S";
font-size: 34px;
}
.cloud:after {
content: "y";
font-size: 34px;
}
.download:after {
content: "w";
font-size: 34px;
}
.trash:after {
content: "I";
font-size: 34px;
}
.rack:after {
content: "t";
font-size: 34px;
}
.map:after {
content: "1";
font-size: 34px;
}
.setting:after {
content: "@";
font-size: 34px;
}
.identity:after {
content: ".";
font-size: 34px;
}
.navigation:after {
content: "2";
font-size: 34px;
}
.gallery:after {
content: "p";
font-size: 34px;
}
.email:after {
content: "%";
font-size: 34px;
}
.users:after {
content: "+";
font-size: 34px;
}
.calendar:after {
content: "P";
font-size: 34px;
}
.link:after {
content: ">";
font-size: 34px;
}
.time:after {
content: "N";
font-size: 34px;
}
.folder:after {
content: "s";
font-size: 34px;
}
.tag:after {
content: "C";
font-size: 34px;
}
.share:after {
content: "5";
font-size: 34px;
}
.lock:after {
content: "U";
font-size: 34px;
}
.unlock:after {
content: "V";
font-size: 34px;
}
.mic:after {
content: "O";
font-size: 34px;
}
.love:after {
content: "6";
font-size: 34px;
}
.star:after {
content: "7";
font-size: 34px;
}
.like:after {
content: "8";
font-size: 34px;
}
.phone:after {
content: "!";
font-size: 34px;
}
.flag:after {
content: "?";
font-size: 34px;
}
.adduser:after {
content: "-";
font-size: 34px;
}
.attach:after {
content: "'";
font-size: 34px;
}
.comment:after {
content: ":";
font-size: 34px;
}
.edit:after {
content: "&";
font-size: 34px;
}
.upload:after {
content: "v";
font-size: 34px;
}
.storage:after {
content: "x";
font-size: 34px;
}
.photo:after {
content: "D";
font-size: 34px;
}
.help:after {
content: "K";
font-size: 34px;
}
.glass:after {
content: "R";
font-size: 34px;
}
.print:after {
content: "<";
font-size: 34px;
}
.gadget:after {
content: '"';
font-size: 34px;
}