Creating custom consistent looking fb and g login buttons/
A Pen by Davide Rizzo on CodePen.
<button class="loginBtn loginBtn--facebook"> | |
Login with Facebook | |
</button> | |
<button class="loginBtn loginBtn--google"> | |
Login with Google | |
</button> |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
body { padding: 2em; } | |
/* Shared */ | |
.loginBtn { | |
box-sizing: border-box; | |
position: relative; | |
/* width: 13em; - apply for fixed size */ | |
margin: 0.2em; | |
padding: 0 15px 0 46px; | |
border: none; | |
text-align: left; | |
line-height: 34px; | |
white-space: nowrap; | |
border-radius: 0.2em; | |
font-size: 16px; | |
color: #FFF; | |
} | |
.loginBtn:before { | |
content: ""; | |
box-sizing: border-box; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 34px; | |
height: 100%; | |
} | |
.loginBtn:focus { | |
outline: none; | |
} | |
.loginBtn:active { | |
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1); | |
} | |
/* Facebook */ | |
.loginBtn--facebook { | |
background-color: #4C69BA; | |
background-image: linear-gradient(#4C69BA, #3B55A0); | |
/*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/ | |
text-shadow: 0 -1px 0 #354C8C; | |
} | |
.loginBtn--facebook:before { | |
border-right: #364e92 1px solid; | |
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat; | |
} | |
.loginBtn--facebook:hover, | |
.loginBtn--facebook:focus { | |
background-color: #5B7BD5; | |
background-image: linear-gradient(#5B7BD5, #4864B1); | |
} | |
/* Google */ | |
.loginBtn--google { | |
/*font-family: "Roboto", Roboto, arial, sans-serif;*/ | |
background: #DD4B39; | |
} | |
.loginBtn--google:before { | |
border-right: #BB3F30 1px solid; | |
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat; | |
} | |
.loginBtn--google:hover, | |
.loginBtn--google:focus { | |
background: #E74B37; | |
} |