168 lines
6.3 KiB
Plaintext
168 lines
6.3 KiB
Plaintext
/* Button style by http://www.joepettersson.com/css3-buttons/ */
|
|
|
|
.download-button {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
text-decoration: none!important;
|
|
font-family: Helvetica, Arial, sans serif;
|
|
padding: 8px 12px;
|
|
border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
box-shadow: inset 0px 0px 2px #fff;
|
|
-o-box-shadow: inset 0px 0px 2px #fff;
|
|
-webkit-box-shadow: inset 0px 0px 2px #fff;
|
|
-moz-box-shadow: inset 0px 0px 2px #fff;
|
|
}
|
|
.download-button:active {
|
|
box-shadow: inset 0px 0px 3px #999;
|
|
-o-box-shadow: inset 0px 0px 3px #999;
|
|
-webkit-box-shadow: inset 0px 0px 3px #999;
|
|
-moz-box-shadow: inset 0px 0px 3px #999;
|
|
}
|
|
|
|
/* The styles for the grey button */
|
|
.button-grey {
|
|
color: #444;
|
|
border: 1px solid #d0d0d0;
|
|
background-image: -moz-linear-gradient(#ededed, #e1e1e1);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(#ededed));
|
|
background-image: -webkit-linear-gradient(#ededed, #e1e1e1);
|
|
background-image: -o-linear-gradient(#ededed, #e1e1e1);
|
|
text-shadow: 1px 1px 1px #fff;
|
|
background-color: #e1e1e1;
|
|
}
|
|
.button-grey:hover {
|
|
border: 1px solid #b0b0b0;
|
|
background-image: -moz-linear-gradient(#e1e1e1, #ededed);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#e1e1e1));
|
|
background-image: -webkit-linear-gradient(#e1e1e1, #ededed);
|
|
background-image: -o-linear-gradient(#e1e1e1, #ededed);
|
|
background-color: #ededed;
|
|
}
|
|
.button-grey:active {border: 1px solid #666;}
|
|
|
|
/* The styles for the red button */
|
|
.button-red {
|
|
color: #923c47;
|
|
border: 1px solid #d96d7c;
|
|
background-image: -moz-linear-gradient(#f997b0, #f6677b);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f6677b), to(#f997b0));
|
|
background-image: -webkit-linear-gradient(#f997b0, #f6677b);
|
|
background-image: -o-linear-gradient(#f997b0, #f6677b);
|
|
text-shadow: 1px 1px 1px #fdbcc7;
|
|
background-color: #f6677b;
|
|
}
|
|
.button-red:hover {
|
|
border: 1px solid #c75964;
|
|
background-image: -moz-linear-gradient(#f6677b, #f997b0);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f997b0), to(#f6677b));
|
|
background-image: -webkit-linear-gradient(#f6677b, #f997b0);
|
|
background-image: -o-linear-gradient(#f6677b, #f997b0);
|
|
background-color: #f997b0;
|
|
}
|
|
.button-red:active {border: 1px solid #ab3e4b;}
|
|
|
|
/* The styles for the blue button */
|
|
.button-blue {
|
|
color: #41788c;
|
|
border: 1px solid #6fb1c7;
|
|
background-image: -moz-linear-gradient(#aae5f7, #73d0f1);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73d0f1), to(#aae5f7));
|
|
background-image: -webkit-linear-gradient(#aae5f7, #73d0f1);
|
|
background-image: -o-linear-gradient(#aae5f7, #73d0f1);
|
|
text-shadow: 1px 1px 1px #bfeafb;
|
|
background-color: #73d0f1;
|
|
}
|
|
.button-blue:hover {
|
|
border: 1px solid #4690ad;
|
|
background-image: -moz-linear-gradient(#73d0f1, #aae5f7);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aae5f7), to(#73d0f1));
|
|
background-image: -webkit-linear-gradient(#73d0f1, #aae5f7);
|
|
background-image: -o-linear-gradient(#73d0f1, #aae5f7);
|
|
background-color: #aae5f7;
|
|
}
|
|
.button-blue:active {border: 1px solid #3b778b;}
|
|
|
|
/* The styles for the green button */
|
|
.button-green {
|
|
color: #5a742d;
|
|
border: 1px solid #95b959;
|
|
background-image: -moz-linear-gradient(#cae387, #a5cb5e);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5cb5e), to(#cae387));
|
|
background-image: -webkit-linear-gradient(#cae387, #a5cb5e);
|
|
background-image: -o-linear-gradient(#cae387, #a5cb5e);
|
|
text-shadow: 1px 1px 1px #dff4bc;
|
|
background-color: #a5cb5e;
|
|
}
|
|
.button-green:hover {
|
|
border: 1px solid #687e30;
|
|
background-image: -moz-linear-gradient(#a5cb5e, #cae387);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cae387), to(#a5cb5e));
|
|
background-image: -webkit-linear-gradient(#a5cb5e, #cae387);
|
|
background-image: -o-linear-gradient(#a5cb5e, #cae387);
|
|
background-color: #cae387;
|
|
}
|
|
.button-green:active {border: 1px solid #506320;}
|
|
|
|
/* The styles for the black button */
|
|
.button-black {
|
|
color: #fff;
|
|
border: 1px solid #4d4d4d;
|
|
background-image: -moz-linear-gradient(#656565, #454545);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#454545), to(#656565));
|
|
background-image: -webkit-linear-gradient(#656565, #454545);
|
|
background-image: -o-linear-gradient(#656565, #454545);
|
|
text-shadow: 1px 1px 1px #6d6d6d;
|
|
background-color: #454545;
|
|
}
|
|
.button-black:hover {
|
|
border: 1px solid #363636;
|
|
background-image: -moz-linear-gradient(#454545, #656565);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#656565), to(#454545));
|
|
background-image: -webkit-linear-gradient(#454545, #656565);
|
|
background-image: -o-linear-gradient(#454545, #656565);
|
|
background-color: #656565;
|
|
}
|
|
.button-black:active {border: 1px solid #000;}
|
|
|
|
/* The styles for the yellow button */
|
|
.button-yellow {
|
|
color: #986a39;
|
|
border: 1px solid #e6b650;
|
|
background-image: -moz-linear-gradient(#ffd974, #febf4d);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#febf4d), to(#ffd974));
|
|
background-image: -webkit-linear-gradient(#ffd974, #febf4d);
|
|
background-image: -o-linear-gradient(#ffd974, #febf4d);
|
|
text-shadow: 1px 1px 1px #fbe5ac;
|
|
background-color: #febf4d;
|
|
}
|
|
.button-yellow:hover {
|
|
border: 1px solid #c1913d;
|
|
background-image: -moz-linear-gradient(#febf4d, #ffd974);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd974), to(#febf4d));
|
|
background-image: -webkit-linear-gradient(#febf4d, #ffd974);
|
|
background-image: -o-linear-gradient(#febf4d, #ffd974);
|
|
background-color: #ffd974;
|
|
}
|
|
.button-yellow:active {border: 1px solid #936b26;}
|
|
|
|
/* The styles for the purple button */
|
|
.button-purple {
|
|
color: #7e5d7c;
|
|
border: 1px solid #cd93c6;
|
|
background-image: -moz-linear-gradient(#e9c4e3, #d798d1);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d798d1), to(#e9c4e3));
|
|
background-image: -webkit-linear-gradient(#e9c4e3, #d798d1);
|
|
background-image: -o-linear-gradient(#e9c4e3, #d798d1);
|
|
text-shadow: 1px 1px 1px #f1ceef;
|
|
background-color: #d798d1;
|
|
}
|
|
.button-purple:hover {
|
|
border: 1px solid #886382;
|
|
background-image: -moz-linear-gradient(#d798d1, #e9c4e3);
|
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9c4e3), to(#d798d1));
|
|
background-image: -webkit-linear-gradient(#d798d1, #e9c4e3);
|
|
background-image: -o-linear-gradient(#d798d1, #e9c4e3);
|
|
background-color: #e9c4e3;
|
|
}
|
|
.button-purple:active {border: 1px solid #6a4664;} |