427 lines
19 KiB
CSS
427 lines
19 KiB
CSS
/*
|
|
|
|
http://hellohappy.org/css3-buttons/
|
|
|
|
*/
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0; }
|
|
|
|
/* minimal
|
|
*******************************************************************************/
|
|
button.minimal {
|
|
background: #e3e3e3;
|
|
border: 1px solid #bbb;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-ms-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
border-radius: 3px;
|
|
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
|
|
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
|
|
-ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
|
|
-o-box-shadow: inset 0 0 1px 1px #f6f6f6;
|
|
box-shadow: inset 0 0 1px 1px #f6f6f6;
|
|
color: #333;
|
|
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
|
line-height: 1;
|
|
padding: 7px 21px;
|
|
text-align: center;
|
|
text-shadow: 0 1px 0 #fff;
|
|
}
|
|
button.minimal:hover {
|
|
background: #d9d9d9;
|
|
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
|
|
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
|
|
-ms-box-shadow: inset 0 0 1px 1px #eaeaea;
|
|
-o-box-shadow: inset 0 0 1px 1px #eaeaea;
|
|
box-shadow: inset 0 0 1px 1px #eaeaea;
|
|
color: #222;
|
|
cursor: pointer; }
|
|
button.minimal:active {
|
|
background: #d0d0d0;
|
|
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
|
|
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
|
|
-ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
|
|
-o-box-shadow: inset 0 0 1px 1px #e3e3e3;
|
|
box-shadow: inset 0 0 1px 1px #e3e3e3;
|
|
color: #000; }
|
|
|
|
/* clean gray
|
|
*******************************************************************************/
|
|
button.clean-gray {
|
|
background-color: #eeeeee;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
|
|
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
|
|
background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
|
|
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
|
|
background-image: linear-gradient(top, #eeeeee, #dddddd);
|
|
border: 1px solid #ccc;
|
|
border-bottom: 1px solid #bbb;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-ms-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
border-radius: 3px;
|
|
color: #333;
|
|
line-height: 1;
|
|
font-size: 11px;
|
|
padding: 3px 7px;
|
|
text-align: center;
|
|
text-shadow: 0 1px 0 #eee;
|
|
}
|
|
button.clean-gray:hover {
|
|
background-color: #dddddd;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
|
|
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
|
|
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
|
|
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
|
|
background-image: linear-gradient(top, #dddddd, #bbbbbb);
|
|
border: 1px solid #bbb;
|
|
border-bottom: 1px solid #999;
|
|
cursor: pointer;
|
|
text-shadow: 0 1px 0 #ddd; }
|
|
button.clean-gray:active {
|
|
border: 1px solid #aaa;
|
|
border-bottom: 1px solid #888;
|
|
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
|
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
|
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
|
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
|
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
|
|
|
|
/* cupid green (inspired by okcupid.com)
|
|
*******************************************************************************/
|
|
button.cupid-green {
|
|
background-color: #7fbf4d;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#7fbf4d), to(#63a62f));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
|
|
background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
|
|
background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
|
|
background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
|
|
background-image: linear-gradient(top, #7fbf4d, #63a62f);
|
|
border: 1px solid #63a62f;
|
|
border-bottom: 1px solid #5b992b;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-ms-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
line-height: 1;
|
|
font-size: 11px;
|
|
padding: 3px 7px;
|
|
text-align: center;
|
|
text-shadow: 0 -1px 0 #4c9021;
|
|
}
|
|
button.cupid-green:hover {
|
|
background-color: #76b347;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#76b347), to(#5e9e2e));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
|
|
background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
|
|
background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
|
|
background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
|
|
background-image: linear-gradient(top, #76b347, #5e9e2e);
|
|
-webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
|
|
-moz-box-shadow: inset 0 1px 0 0 #8dbf67;
|
|
-ms-box-shadow: inset 0 1px 0 0 #8dbf67;
|
|
-o-box-shadow: inset 0 1px 0 0 #8dbf67;
|
|
box-shadow: inset 0 1px 0 0 #8dbf67;
|
|
cursor: pointer; }
|
|
button.cupid-green:active {
|
|
border: 1px solid #5b992b;
|
|
border-bottom: 1px solid #538c27;
|
|
-webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
|
|
-moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
|
|
-ms-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
|
|
-o-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
|
|
box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }
|
|
|
|
/* cupid blue (inspired by okcupid.com)
|
|
*******************************************************************************/
|
|
button.cupid-blue {
|
|
background-color: #d7e5f5;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e5f5), to(#cbe0f5));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
|
|
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
|
|
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
|
|
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
|
|
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
|
|
border-top: 1px solid #abbbcc;
|
|
border-left: 1px solid #a7b6c7;
|
|
border-bottom: 1px solid #a1afbf;
|
|
border-right: 1px solid #a7b6c7;
|
|
-webkit-border-radius: 12px;
|
|
-moz-border-radius: 12px;
|
|
-ms-border-radius: 12px;
|
|
-o-border-radius: 12px;
|
|
border-radius: 12px;
|
|
-webkit-box-shadow: inset 0 1px 0 0 white;
|
|
-moz-box-shadow: inset 0 1px 0 0 white;
|
|
-ms-box-shadow: inset 0 1px 0 0 white;
|
|
-o-box-shadow: inset 0 1px 0 0 white;
|
|
box-shadow: inset 0 1px 0 0 white;
|
|
color: #1a3e66;
|
|
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
line-height: 1;
|
|
padding: 3px 5px;
|
|
text-align: center;
|
|
text-shadow: 0 1px 1px #fff;
|
|
}
|
|
button.cupid-blue:hover {
|
|
background-color: #ccd9e8;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccd9e8), to(#c1d4e8));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
|
|
background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
|
|
background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
|
|
background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
|
|
background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
|
|
border-top: 1px solid #a1afbf;
|
|
border-left: 1px solid #9caaba;
|
|
border-bottom: 1px solid #96a3b3;
|
|
border-right: 1px solid #9caaba;
|
|
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
|
|
-moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
|
|
-ms-box-shadow: inset 0 1px 0 0 #f2f2f2;
|
|
-o-box-shadow: inset 0 1px 0 0 #f2f2f2;
|
|
box-shadow: inset 0 1px 0 0 #f2f2f2;
|
|
color: #163659;
|
|
cursor: pointer; }
|
|
button.cupid-blue:active {
|
|
border: 1px solid #8c98a7;
|
|
-webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
|
|
-moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
|
|
-ms-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
|
|
-o-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
|
|
box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; }
|
|
|
|
/* blue pill (inspired by iTunes)
|
|
*******************************************************************************/
|
|
button.blue-pill {
|
|
background-color: #a5b8da;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
|
|
background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
|
|
background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
|
|
background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
|
|
background-image: linear-gradient(top, #a5b8da, #7089b3);
|
|
border-top: 1px solid #758fba;
|
|
border-right: 1px solid #6c84ab;
|
|
border-bottom: 1px solid #5c6f91;
|
|
border-left: 1px solid #6c84ab;
|
|
-webkit-border-radius: 18px;
|
|
-moz-border-radius: 18px;
|
|
-ms-border-radius: 18px;
|
|
-o-border-radius: 18px;
|
|
border-radius: 18px;
|
|
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
|
|
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
|
|
-ms-box-shadow: inset 0 1px 0 0 #aec3e5;
|
|
-o-box-shadow: inset 0 1px 0 0 #aec3e5;
|
|
box-shadow: inset 0 1px 0 0 #aec3e5;
|
|
color: #fff;
|
|
font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
line-height: 1;
|
|
padding: 8px 0;
|
|
text-align: center;
|
|
text-shadow: 0 -1px 1px #64799e;
|
|
text-transform: uppercase;
|
|
}
|
|
button.blue-pill:hover {
|
|
background-color: #9badcc;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#9badcc), to(#687fa6));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #9badcc, #687fa6);
|
|
background-image: -moz-linear-gradient(top, #9badcc, #687fa6);
|
|
background-image: -ms-linear-gradient(top, #9badcc, #687fa6);
|
|
background-image: -o-linear-gradient(top, #9badcc, #687fa6);
|
|
background-image: linear-gradient(top, #9badcc, #687fa6);
|
|
border-top: 1px solid #6d86ad;
|
|
border-right: 1px solid #647a9e;
|
|
border-bottom: 1px solid #546685;
|
|
border-left: 1px solid #647a9e;
|
|
-webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
|
|
-moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
|
|
-ms-box-shadow: inset 0 1px 0 0 #a5b9d9;
|
|
-o-box-shadow: inset 0 1px 0 0 #a5b9d9;
|
|
box-shadow: inset 0 1px 0 0 #a5b9d9;
|
|
cursor: pointer; }
|
|
button.blue-pill:active {
|
|
border: 1px solid #546685;
|
|
-webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
|
|
-moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
|
|
-ms-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
|
|
-o-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
|
|
box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }
|
|
|
|
/* slick black
|
|
*******************************************************************************/
|
|
button.slick-black {
|
|
background-color: rgba(50, 50, 50, 0.9);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50, 50, 50, 0.9) 0%), to(rgba(30, 30, 30, 0.9) 50%));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
border: 0;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
-ms-border-radius: 4px;
|
|
-o-border-radius: 4px;
|
|
border-radius: 4px;
|
|
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
|
|
-moz-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
|
|
-ms-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
|
|
-o-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
|
|
box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
|
|
color: #fff;
|
|
font: lighter 22px "helvetica neue", helvetica, arial, sans-serif;
|
|
line-height: 1;
|
|
padding: 12px 0;
|
|
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.3);
|
|
}
|
|
button.slick-black:hover {
|
|
background-color: rgba(70, 70, 70, 0.9);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(70, 70, 70, 0.9) 0%), to(rgba(50, 50, 50, 0.9) 50%));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
|
|
background-image: -moz-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
|
|
background-image: -ms-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
|
|
background-image: -o-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
|
|
background-image: linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
|
|
cursor: pointer; }
|
|
button.slick-black:active {
|
|
background-color: rgba(30, 30, 30, 0.9);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(30, 30, 30, 0.9) 0%), to(rgba(20, 20, 20, 0.9) 50%));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: -moz-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: -ms-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: -o-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
|
background-image: linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); }
|
|
|
|
|
|
/* download itunes
|
|
I wrote a blog post about creating this button:
|
|
http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss
|
|
*******************************************************************************/
|
|
button.download-itunes {
|
|
background-color: #52a8e8;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#52a8e8), to(#377ad0));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
|
|
background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
|
|
background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
|
|
background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
|
|
background-image: linear-gradient(top, #52a8e8, #377ad0);
|
|
border-top: 1px solid #4081af;
|
|
border-right: 1px solid #2e69a3;
|
|
border-bottom: 1px solid #20559a;
|
|
border-left: 1px solid #2e69a3;
|
|
-webkit-border-radius: 16px;
|
|
-moz-border-radius: 16px;
|
|
-ms-border-radius: 16px;
|
|
-o-border-radius: 16px;
|
|
border-radius: 16px;
|
|
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
|
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
|
-ms-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
|
-o-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
|
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
|
|
color: #fff;
|
|
font: normal 11px "lucida grande", sans-serif;
|
|
line-height: 1;
|
|
padding: 3px 5px;
|
|
text-align: center;
|
|
text-shadow: 0 -1px 1px #3275bc;
|
|
width: 112px;
|
|
-webkit-background-clip: padding-box; }
|
|
button.download-itunes:hover {
|
|
background-color: #3e9ee5;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#3e9ee5 0%), to(#206bcb 100%));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
|
|
background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
|
|
background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
|
|
background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
|
|
background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
|
|
border-top: 1px solid #2a73a6;
|
|
border-right: 1px solid #165899;
|
|
border-bottom: 1px solid #07428f;
|
|
border-left: 1px solid #165899;
|
|
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
|
|
-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
|
|
-ms-box-shadow: inset 0 1px 0 0 #62b1e9;
|
|
-o-box-shadow: inset 0 1px 0 0 #62b1e9;
|
|
box-shadow: inset 0 1px 0 0 #62b1e9;
|
|
cursor: pointer;
|
|
text-shadow: 0 -1px 1px #1d62ab;
|
|
-webkit-background-clip: padding-box; }
|
|
button.download-itunes:active {
|
|
background: #3282d3;
|
|
border: 1px solid #154c8c;
|
|
border-bottom: 1px solid #0e408e;
|
|
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
|
|
-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
|
|
-ms-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
|
|
-o-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
|
|
box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
|
|
text-shadow: 0 -1px 1px #2361a4;
|
|
-webkit-background-clip: padding-box; }
|
|
|
|
button[disabled].download-itunes,
|
|
button[disabled].download-itunes:hover,
|
|
button[disabled].download-itunes:active {
|
|
background-color: #dadada;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#dadada), to(#f3f3f3));
|
|
/* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3);
|
|
background-image: -moz-linear-gradient(top, #dadada, #f3f3f3);
|
|
background-image: -ms-linear-gradient(top, #dadada, #f3f3f3);
|
|
background-image: -o-linear-gradient(top, #dadada, #f3f3f3);
|
|
background-image: linear-gradient(top, #dadada, #f3f3f3);
|
|
border-top: 1px solid #c5c5c5;
|
|
border-right: 1px solid #cecece;
|
|
border-bottom: 1px solid #d9d9d9;
|
|
border-left: 1px solid #cecece;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
-ms-box-shadow: none;
|
|
-o-box-shadow: none;
|
|
box-shadow: none;
|
|
color: #8f8f8f;
|
|
cursor: not-allowed;
|
|
text-shadow: 0 -1px 1px #ebebeb; }
|
|
|
|
button.download-itunes::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0; }
|
|
|
|
|
|
/* disabled button styles
|
|
works with this markup: <button disabled="disabled">Submit</button>
|
|
*******************************************************************************/
|
|
button[disabled],
|
|
button[disabled]:hover,
|
|
button[disabled]:active {
|
|
background: #eee;
|
|
border: 0;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
-ms-box-shadow: none;
|
|
-o-box-shadow: none;
|
|
box-shadow: none;
|
|
color: #aaa;
|
|
cursor: not-allowed;
|
|
text-shadow: none; }
|