Live Demo
HTML Code :
<body>
<section>
<a href="#" class="button google">Sign in with Google</a>
<a href="#" class="button facebook">Sign in with Facebook</a>
<a href="#" class="button twitter">Sign in with Twitter</a>
<a href="#" class="button linkedin">Sign in with Linkedin</a>
<a href="#" class="button yahoo">Sign in with Yahoo</a>
<a href="#" class="button msn">Sign in with MSN</a>
<a href="#" class="button aol">Sign in with AOL</a>
<a href="#" class="button openid">Sign in with OpenID</a>
</section>
<section>
<a href="#" class="button skeuo google">Sign in with Google</a>
<a href="#" class="button skeuo facebook">Sign in with Facebook</a>
<a href="#" class="button skeuo twitter">Sign in with Twitter</a>
<a href="#" class="button skeuo linkedin">Sign in with Linkedin</a>
<a href="#" class="button skeuo yahoo">Sign in with Yahoo</a>
<a href="#" class="button skeuo msn">Sign in with MSN</a>
<a href="#" class="button skeuo aol">Sign in with AOL</a>
<a href="#" class="button skeuo openid">Sign in with OpenID</a>
</section>
<section>
<a href="#" class="button round google">Sign in with Google</a>
<a href="#" class="button round facebook">Sign in with Facebook</a>
<a href="#" class="button round twitter">Sign in with Twitter</a>
<a href="#" class="button round linkedin">Sign in with Linkedin</a>
<a href="#" class="button round yahoo">Sign in with Yahoo</a>
<a href="#" class="button round msn">Sign in with MSN</a>
<a href="#" class="button round aol">Sign in with AOL</a>
<a href="#" class="button round openid">Sign in with OpenID</a>
</section>
<section>
<a href="#" class="button round skeuo google">Sign in with Google</a>
<a href="#" class="button round skeuo facebook">Sign in with Facebook</a>
<a href="#" class="button round skeuo twitter">Sign in with Twitter</a>
<a href="#" class="button round skeuo linkedin">Sign in with Linkedin</a>
<a href="#" class="button round skeuo yahoo">Sign in with Yahoo</a>
<a href="#" class="button round skeuo msn">Sign in with MSN</a>
<a href="#" class="button round skeuo aol">Sign in with AOL</a>
<a href="#" class="button round skeuo openid">Sign in with OpenID</a>
</section>
<section>
<a href="#" class="button pill google">Sign in with Google</a>
<a href="#" class="button pill facebook">Sign in with Facebook</a>
<a href="#" class="button pill twitter">Sign in with Twitter</a>
<a href="#" class="button pill linkedin">Sign in with Linkedin</a>
<a href="#" class="button pill yahoo">Sign in with Yahoo</a>
<a href="#" class="button pill msn">Sign in with MSN</a>
<a href="#" class="button pill aol">Sign in with AOL</a>
<a href="#" class="button pill openid">Sign in with OpenID</a>
</section>
<section>
<a href="#" class="button pill skeuo google">Sign in with Google</a>
<a href="#" class="button pill skeuo facebook">Sign in with Facebook</a>
<a href="#" class="button pill skeuo twitter">Sign in with Twitter</a>
<a href="#" class="button pill skeuo linkedin">Sign in with Linkedin</a>
<a href="#" class="button pill skeuo yahoo">Sign in with Yahoo</a>
<a href="#" class="button pill skeuo msn">Sign in with MSN</a>
<a href="#" class="button pill skeuo aol">Sign in with AOL</a>
<a href="#" class="button pill skeuo openid">Sign in with OpenID</a>
</section>
</body>
Css Style Code :
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 900;
src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGHiec-hVyr2k4iOzEQsW1iE.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/fpTVHK8qsXbIeTHTrnQH6PULlOK_XQENnt2ryrY843E.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/fpTVHK8qsXbIeTHTrnQH6Nog-We9VNve39Jr4Vs_aDc.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 900;
src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackIt'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/fpTVHK8qsXbIeTHTrnQH6ONg1gFYvjbPSGxSBhvPu6E.woff) format('woff');
}
/* for demo only */body {margin:0 auto;}section {float:left;width:165px;margin:10px;}
/* STRUCTURE */
* {
}
body {}
a { }
/* BUTTONS */
.button {
font:600 20px/24px "Source Sans Pro", Arial,sans-serif;
text-decoration: none;
text-align:center;
display:block;
float:left;
width:165px;
height:70px;
margin:10px;
padding:10px 20px 0;
color:#fff;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.button:hover {opacity:.9;}
.button:active {box-shadow:inset 0 0 0 100px rgba(0,0,0,.25);}
/* 3D OPTION */
.skeuo.button {
box-shadow:0px 2px 3px rgba(0,0,0,.5),inset 0px 0px 15px 1px rgba(255,255,255,.25),inset 0px 1px 0px rgba(255,255,255,.25);
text-shadow:0 -1px 0 rgba(0,0,0,.5);
}
.skeuo.button:active {box-shadow:inset 0 5px 15px rgba(0,0,0,.5);}
/* CORNER OPTION */
.round {border-radius: 5px;}
.pill {border-radius: 35px;}
/* FACEBOOK */
.facebook {background:rgb(59,89,152) url(images/button-facebook.png);}
.skeuo.facebook {
background-image:url(images/button-facebook.png),-moz-linear-gradient(50% 0% -90deg,rgb(59,89,152) 0%,rgb(37,56,98) 99%);
background-image:url(images/button-facebook.png),-webkit-linear-gradient(-90deg,rgb(59,89,152) 0%,rgb(37,56,98) 99%);
background-image:url(images/button-facebook.png),linear-gradient(180deg,rgb(59,89,152) 0%,rgb(37,56,98) 99%);
border:1px solid rgb(27,43,75);
}
/* TWITTER */
.twitter {background:rgb(0,160,209) url(images/button-twitter.png);}
.skeuo.twitter {
background-image:url(images/button-twitter.png),-moz-linear-gradient(50% 0% -90deg,rgb(0,160,209) 0%,rgb(0,112,148) 99%);
background-image:url(images/button-twitter.png),-webkit-linear-gradient(-90deg,rgb(0,160,209) 0%,rgb(0,112,148) 99%);
background-image:url(images/button-twitter.png),linear-gradient(180deg,rgb(0,160,209) 0%,rgb(0,112,148) 99%);
border:1px solid rgb(0,87,116);
}
/* GOOGLE */
.google {background:rgb(219,74,57) url(images/button-google.png);}
.skeuo.google {
background-image:url(images/button-google.png),-moz-linear-gradient(50% 0% -90deg,rgb(219,74,57) 0%,rgb(152,52,41) 99%);
background-image:url(images/button-google.png),-webkit-linear-gradient(-90deg,rgb(219,74,57) 0%,rgb(152,52,41) 99%);
background-image:url(images/button-google.png),linear-gradient(180deg,rgb(219,74,57) 0%,rgb(152,52,41) 99%);
border:1px solid rgb(127,42,34);
}
/* LINKEDIN */
.linkedin {background:rgb(14,118,168) url(images/button-linkedin.png);}
.skeuo.linkedin {
background-image:url(images/button-linkedin.png),-moz-linear-gradient(50% 0% -90deg,rgb(14,118,168) 0%,rgb(8,73,104) 99%);
background-image:url(images/button-linkedin.png),-webkit-linear-gradient(-90deg,rgb(14,118,168) 0%,rgb(8,73,104) 99%);
background-image:url(images/button-linkedin.png),linear-gradient(180deg,rgb(14,118,168) 0%,rgb(8,73,104) 99%);
border:1px solid rgb(5,57,81);
}
/* YAHOO */
.yahoo {background:rgb(114,14,158) url(images/button-yahoo.png);}
.skeuo.yahoo {
background-image:url(images/button-yahoo.png),-moz-linear-gradient(50% 0% -90deg,rgb(114,14,158) 0%,rgb(78,9,110) 99%);
background-image:url(images/button-yahoo.png),-webkit-linear-gradient(-90deg,rgb(114,14,158) 0%,rgb(78,9,110) 99%);
background-image:url(images/button-yahoo.png),linear-gradient(180deg,rgb(114,14,158) 0%,rgb(78,9,110) 99%);
border:1px solid rgb(74,21,94);
}
/* MSN */
.msn {background:rgb(0,51,153) url(images/button-msn.png);}
.skeuo.msn {
background-image:url(images/button-msn.png),-moz-linear-gradient(50% 0% -90deg,rgb(0,51,153) 0%,rgb(0,30,90) 99%);
background-image:url(images/button-msn.png),-webkit-linear-gradient(-90deg,rgb(0,51,153) 0%,rgb(0,30,90) 99%);
background-image:url(images/button-msn.png),linear-gradient(180deg,rgb(0,51,153) 0%,rgb(0,30,90) 99%);
border:1px solid rgb(6,16,30);
}
/* AOL */
.aol {background:rgb(230,36,138) url(images/button-aol.png);}
.skeuo.aol {
background-image:url(images/button-aol.png),-moz-linear-gradient(50% 0% -90deg,rgb(230,36,138) 0%,rgb(178,28,107) 99%);
background-image:url(images/button-aol.png),-webkit-linear-gradient(-90deg,rgb(230,36,138) 0%,rgb(178,28,107) 99%);
background-image:url(images/button-aol.png),linear-gradient(180deg,rgb(230,36,138) 0%,rgb(178,28,107) 99%);
border:1px solid rgb(137,21,83);
}
/* OPENID */
.openid {background:rgb(247,112,15) url(images/button-openid.png);}
.skeuo.openid {
background-image:url(images/button-openid.png),-moz-linear-gradient(50% 0% -90deg,rgb(247,112,15) 0%,rgb(169,76,12) 99%);
background-image:url(images/button-openid.png),-webkit-linear-gradient(-90deg,rgb(247,112,15) 0%,rgb(169,76,12) 99%);
background-image:url(images/button-openid.png),linear-gradient(180deg,rgb(247,112,15) 0%,rgb(169,76,12) 99%);
border:1px solid rgb(127,57,10);
}
How To Use This Code :
End.
''Any Problem Comment Please...."
