Created
June 26, 2012 18:28
-
-
Save igorgue/2997758 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Button Object | |
*/ | |
/* | |
* 1. Corrects inability to style clickable 'input' types in iOS | |
* 2. Remove excess padding in IE6/7 | |
* 3. IE6/7 inline-block hack for native block-level elements | |
*/ | |
.btn-auth { | |
position: relative; | |
display: inline-block; | |
height: 22px; | |
padding: 0 1em; | |
border: 1px solid #999; | |
border-radius: 4px; | |
margin: 0; | |
text-align: center; | |
text-decoration: none; | |
font-size: 14px; | |
line-height: 22px; | |
white-space: nowrap; | |
cursor: pointer; | |
color: #222; | |
background: #fff; | |
-webkit-box-sizing: content-box; | |
-moz-box-sizing: content-box; | |
box-sizing: content-box; | |
/* iOS */ | |
-webkit-appearance: none; /* 1 */ | |
/* IE6/7 hacks */ | |
*overflow: visible; /* 2 */ | |
*display: inline; /* 3 */ | |
*zoom: 1; /* 3 */ | |
} | |
.btn-auth:hover, | |
.btn-auth:focus, | |
.btn-auth:active { | |
text-decoration: none; | |
} | |
.btn-auth:before { | |
content: ""; | |
float: left; | |
width: 22px; | |
height: 22px; | |
background: url(auth-icons.png) no-repeat 99px 99px; | |
} | |
/* | |
* 36px | |
*/ | |
.btn-auth.large { | |
height: 36px; | |
line-height: 36px; | |
font-size: 20px; | |
} | |
.btn-auth.large:before { | |
width: 36px; | |
height: 36px; | |
} | |
/* | |
* Remove excess padding and border in FF3+ | |
*/ | |
.btn-auth::-moz-focus-inner { | |
border: 0; | |
padding: 0; | |
} | |
/* Facebook (extends .btn-auth) | |
========================================================================== */ | |
.btn-facebook { | |
box-shadow: inset 0 0 .2em rgba(255,255,255,0.3),inset 0 0 .2em rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.3); | |
border-color: #29447e; | |
border-bottom-color: #1a356e; | |
color: #fff; | |
background-color: #5872a7; | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7)); | |
background-image: -webkit-linear-gradient(#637bad, #5872a7); | |
background-image: -moz-linear-gradient(#637bad, #5872a7); | |
background-image: -ms-linear-gradient(#637bad, #5872a7); | |
background-image: -o-linear-gradient(#637bad, #5872a7); | |
background-image: linear-gradient(#637bad, #5872a7); | |
text-shadow: 0 1.8px 0 rgba(0, 0, 0, 0.50); | |
-webkit-box-shadow: inset 0 1px 0 #879ac0; | |
box-shadow: inset 0 1px 0 #879ac0; | |
} | |
.btn-facebook:hover, | |
.btn-facebook:focus { | |
box-shadow:inset 0 0 .2em rgba(255,255,255,0.3),inset 0 0 .2em rgba(255,255,255,0.3),0 1px 5px rgba(0,0,0,0.6); | |
-o-box-shadow:inset 0 0 .2em rgba(255,255,255,0.3),inset 0 0 .2em rgba(255,255,255,0.3),0 1px 5px rgba(0,0,0,0.6); | |
-moz-box-shadow:inset 0 0 .2em rgba(255,255,255,0.3),inset 0 0 .2em rgba(255,255,255,0.3),0 1px 5px rgba(0,0,0,0.6); | |
-webkit-box-shadow:inset 0 0 .2em rgba(255,255,255,0.3),inset 0 0 .2em rgba(255,255,255,0.3),0 1px 5px rgba(0,0,0,0.6); | |
background-color: #3b5998; | |
} | |
.btn-facebook:active { | |
background: #4f6aa3; | |
-webkit-box-shadow: inset 0 1px 0 #45619d; | |
box-shadow: inset 0 1px 0 #45619d; | |
} | |
/* | |
* Icon | |
*/ | |
.btn-facebook:before { | |
border-right: 1px solid #465f94; | |
margin: 0 1em 0 -1em; | |
background-position: 0 0; | |
} | |
.btn-facebook.large:before { | |
background-position: 0 -22px; | |
} | |
/* GitHub | |
========================================================================== */ | |
.btn-github { | |
border-color: #d4d4d4; | |
background: #ececec; | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); | |
background-image: -webkit-linear-gradient(#f4f4f4, #ececec); | |
background-image: -moz-linear-gradient(#f4f4f4, #ececec); | |
background-image: -ms-linear-gradient(#f4f4f4, #ececec); | |
background-image: -o-linear-gradient(#f4f4f4, #ececec); | |
background-image: linear-gradient(#f4f4f4, #ececec); | |
text-shadow: 1px 1px 0 #fff; | |
} | |
.btn-github:hover, | |
.btn-github:focus { | |
border-color: #518cc6; | |
border-bottom-color: #2a65a0; | |
color: #fff; | |
background-color: #599bdc; | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); | |
background-image: -webkit-linear-gradient(#599bdc, #3072b3); | |
background-image: -moz-linear-gradient(#599bdc, #3072b3); | |
background-image: -ms-linear-gradient(#599bdc, #3072b3); | |
background-image: -o-linear-gradient(#599bdc, #3072b3); | |
background-image: linear-gradient(#599bdc, #3072b3); | |
text-shadow: -1px -1px 0 rgba(0,0,0,0.3); | |
} | |
.btn-github:active { | |
border-color: #2A65A0; | |
border-bottom-color: #518CC6; | |
background: #3072B3; | |
background: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); | |
background: -webkit-linear-gradient(#3072b3, #599bdc); | |
background: -moz-linear-gradient(#3072b3, #599bdc); | |
background: -ms-linear-gradient(#3072b3, #599bdc); | |
background: -o-linear-gradient(#3072b3, #599bdc); | |
background: linear-gradient(#3072b3, #599bdc); | |
} | |
/* | |
* Icon | |
*/ | |
.btn-github:before { | |
margin: 0 0.6em 0 -0.6em; | |
background-position: -44px 0; | |
} | |
.btn-github:hover:before, | |
.btn-github:focus:before, | |
.btn-github:active:before { | |
background-position: -66px 0; | |
} | |
.btn-github.large:before { | |
background-position: -72px -22px; | |
} | |
.btn-github.large:hover:before, | |
.btn-github.large:focus:before, | |
.btn-github.large:active:before { | |
background-position: -108px -22px; | |
} | |
========================================================================== */ | |
.btn-google { | |
border-color: #3079ed; | |
color: #fff; | |
background: #4787ed; | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); | |
background-image: -webkit-linear-gradient(#4d90fe, #4787ed); | |
background-image: -moz-linear-gradient(#4d90fe, #4787ed); | |
background-image: -ms-linear-gradient(#4d90fe, #4787ed); | |
background-image: -o-linear-gradient(#4d90fe, #4787ed); | |
background-image: linear-gradient(#4d90fe, #4787ed); | |
text-shadow: 0 1px rgba(0,0,0,0.1); | |
} | |
.btn-google:hover, | |
.btn-google:focus { | |
background-color: #357ae8; | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); | |
background-image: -webkit-linear-gradient(#4d90fe, #357ae8); | |
background-image: -moz-linear-gradient(#4d90fe, #357ae8); | |
background-image: -ms-linear-gradient(#4d90fe, #357ae8); | |
background-image: -o-linear-gradient(#4d90fe, #357ae8); | |
background-image: linear-gradient(#4d90fe, #357ae8); | |
text-shadow: 0 1px rgba(0,0,0,0.3); | |
} | |
.btn-google:active { | |
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); | |
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); | |
} | |
/* | |
* Icon | |
*/ | |
.btn-google:before { | |
margin: 0 1em 0 -1em; | |
background-position: -88px 0; | |
background-color: #e6e6e6; | |
} | |
.btn-google.large:before { | |
background-position: -144px -22px; | |
} | |
/* Open ID | |
========================================================================== */ | |
.btn-openid:hover, | |
.btn-openid:focus { | |
border-color: #777; | |
background: #fcfcfc; | |
} | |
.btn-openid:active { | |
background: #f5f5f5; | |
} | |
/* | |
* Icon | |
*/ | |
.btn-openid:before { | |
margin: 0 0.6em 0 -0.6em; | |
background-position: -154px 0; | |
} | |
.btn-openid.large:before { | |
background-position: -252px -22px; | |
} | |
========================================================================== */ | |
.btn-twitter { | |
border-color: #a6cde6; | |
color: #327695; | |
background: #cfe4f0; | |
/* css3 */ | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f5f7), to(rgba(255,255,255,0))); | |
background-image: -webkit-linear-gradient(#f1f5f7, rgba(255,255,255,0)); | |
background-image: -moz-linear-gradient(#f1f5f7, rgba(255,255,255,0)); | |
background-image: -ms-linear-gradient(#f1f5f7, rgba(255,255,255,0)); | |
background-image: -o-linear-gradient(#f1f5f7, rgba(255,255,255,0)); | |
background-image: linear-gradient(#f1f5f7, rgba(255,255,255,0)); | |
text-shadow: 1px 0 0 #bcd3df; | |
-webkit-box-shadow: inset 0 1px 0 #fff; | |
box-shadow: inset 0 1px 0 #fff; | |
} | |
.btn-twitter:hover, | |
.btn-twitter:focus { | |
border-color: #8dc2e4; | |
background-color: #cadde9; | |
} | |
.btn-twitter:active { | |
background: #cadde9; | |
-webkit-box-shadow: inset 0 1px 0 #bbd6e7; | |
box-shadow: inset 0 1px 0 #bbd6e7; | |
} | |
/* | |
* Icon | |
*/ | |
.btn-twitter:before { | |
margin: 0 0.6em 0 -0.6em; | |
background-position: -22px 0; | |
} | |
.btn-twitter.large:before { | |
background-position: -36px -22px; | |
} | |
/* Windows Live ID | |
========================================================================== */ | |
.btn-windows:hover, | |
.btn-windows:focus { | |
border-color: #777; | |
background: #fcfcfc; | |
} | |
.btn-windows:active { | |
background: #f5f5f5; | |
} | |
/* | |
* Icon | |
*/ | |
.btn-windows:before { | |
margin: 0 0.6em 0 -0.6em; | |
background-position: -110px 0; | |
} | |
.btn-windows.large:before { | |
background-position: -180px -22px; | |
} | |
/* Yahoo! | |
========================================================================== */ | |
.btn-yahoo { | |
border-color: #ffb305; | |
background: #ffc426; | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.5)), to(rgba(255,255,255,0))); | |
background-image: -webkit-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); | |
background-image: -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); | |
background-image: -ms-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); | |
background-image: -o-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); | |
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); | |
text-shadow: -1px -1px 0 rgba(0,0,0,0.1); | |
} | |
.btn-yahoo:hover, | |
.btn-yahoo:focus { | |
background-color: #fabf20; | |
} | |
.btn-yahoo:active { | |
border-color: #f09700; | |
background-image: none; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.3); | |
box-shadow: inset 0 1px 1px rgba(0,0,0,0.3); | |
} | |
/* | |
* Icon | |
*/ | |
.btn-yahoo:before { | |
margin: 0 0.6em 0 -0.6em; | |
background-position: -132px 0; | |
} | |
.btn-yahoo.large:before { | |
background-position: -216px -22px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment