Social Login
HTML
<p class="title">Social Login</p>
<div id="container">
<a href="http://codepen.io/simoberny/" target="_blank"><div class="round"><img src="https://cdn1.iconfinder.com/data/icons/simple-icons/256/codepen-256-black.png"/></div></a>
<div id="white">
<div id="facebook">
<p class="facew">f</p>
<div id="closeface" class="close">X</div>
<div id="facelogin" class="containerlogin">
<form method="post">
<div class="group">
<input type="text" class="inputmat" placeholder="Username" required>
<span class="bar"></span>
</div>
<div class="group">
<input type="password" class="inputmat" placeholder="Password" required>
<span class="bar"></span>
</div>
<button class="button" type="submit">Sign in</button>
</form>
</div>
</div>
<div id="google">
<p class="facew"><i class="fa fa-google-plus"></i></p>
<div id="closegoogle" class="close">X</div>
<div id="googlelogin" class="containerlogin">
<form method="post">
<div class="group">
<input type="text" class="inputmat" placeholder="Username" required>
<span class="bar"></span>
</div>
<div class="group">
<input type="password" class="inputmat" placeholder="Password" required>
<span class="bar"></span>
</div>
<button class="button" type="submit">Sign in</button>
</form>
</div>
</div>
<div id="twitter">
<p class="facew"><i class="fa fa-twitter"></i></p>
<div id="closetwitter" class="close">X</div>
<div id="twitterlogin" class="containerlogin">
<form method="post">
<div class="group">
<input type="text" class="inputmat" placeholder="Username" required>
<span class="bar"></span>
</div>
<div class="group">
<input type="password" class="inputmat" placeholder="Password" required>
<span class="bar"></span>
</div>
<button class="button" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
</div>
SCSS
html,body{
margin:0;
overlow: auto;
background: #111;
font-family: 'Roboto';
}
.title{
text-align: center;
font-family: 'Roboto';
font-size: 35px;
padding: 10px;
color: #90a4ae;
}
#container{
width:300px;
height:350px;
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
margin-top:50px;
background: #FFF;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
border-radius:5px;
z-index: 100;
margin-bottom: 100px;
}
#white{
width: 100%;
height: 100%;
background: #fff;
position: absolute;
z-index: 150;
margin:0;
padding: 0;
border-radius:3px;
}
.round{
position:absolute;
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #ff9800;
right: -100px;
bottom: -10px;
z-index: 10;
transition: all 0.3s;
}
.round:hover{
background: rgba(255,255,255,0.7);
transition: all 0.3s;
border: 2px solid #e91e63;
}
.round img{
width: 70%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
}
#container:after{
content:'';
position:absolute;
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid #8bc34a;
right: 0;
z-index: 10;
}
#container:before{
content:'';
display:block;
position:absolute;
width: 320px;
height: 320px;
border-radius: 50%;
border: 2px solid #03a9f4;
left: 50px;
top: -40px;
z-index: 0;
}
#facebook{
width: 60px;
height: 60px;
background: #3b5998;
border-radius:50%;
position: absolute;
left:0;
right:0;
top: 42.5px;
margin-left:auto;
margin-right:auto;
transform-origin: center center;
cursor:pointer;
z-index: 0;
}
#facebook:after{
content:"";
opacity: 0;
width: 70px;
height: 70px;
position: absolute;
border: 3px solid #3b5998;
border-radius: 50%;
top: -8px;
left: -8px;
transition: all 0.3s;
}
#facebook:hover{
&:after{
animation: bounce 0.5s ease-in;
}
}
@keyframes bounce{
0%{
transform: scale(0.5);
opacity: 1;
}
50%{
transform: scale(1);
opacity: 0.8;
}
75%{
transform: scale(1.3);
opacity: 0.5;
}
100%{
transform: scale(1.6);
opacity: 0;
}
}
#google{
width: 60px;
height: 60px;
background: #d73d32;
border-radius:50%;
position:absolute;
left:0;
right:0;
top: 145px;
margin-left:auto;
margin-right:auto;
cursor:pointer;
z-index: 0;
}
#google:after{
content:"";
opacity: 0;
width: 70px;
height: 70px;
position: absolute;
border: 3px solid #d73d32;
border-radius: 50%;
top: -8px;
left: -8px;
transition: all 0.3s;
}
#google:hover{
&:after{
animation: bounce 0.5s ease-in;
}
}
#twitter{
width: 60px;
height: 60px;
background: #55acee;
border-radius:50%;
position:absolute;
left:0;
right:0;
top: 247.5px;
margin-left:auto;
margin-right:auto;
transform-origin: center center;
cursor:pointer;
z-index: 0;
}
#twitter:after{
content:"";
opacity: 0;
width: 70px;
height: 70px;
position: absolute;
border: 3px solid #55acee;
border-radius: 50%;
top: -8px;
left: -8px;
transition: all 0.3s;
}
#twitter:hover{
&:after{
animation: bounce 0.5s ease-in;
}
}
.facew{
font-family: 'Roboto';
text-align:center;
color: white;
line-height: 60px;
font-size: 28px;
margin:0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.close{
position:absolute;
top:10px;
right:10px;
color: white;
display: none;
z-index: 10;
width: 20px;
height: 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.containerlogin{
width: 200px;
height: 250px;
z-index: 500;
display: none;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
@keyframes xep{
0%{
border-radius: 50%;
}
50%{
width: 200px;
height: 200px;
border-radius: 50%;
}
100%{
width: 101%;
height: 100%;
border-radius: 0;
top:0;
}
}
@keyframes xep-rev{
from{
width: 100%;
height: 100%;
border-radius: 0;
top: 0;
}
to{
width: 60px;
height: 60px;
border-radius: 50%;
z-index: 0;
transform-origin: bottom center;
}
}
.inputmat{
border: none;
background: rgba(255,255,255,0.08);
margin: auto;
display: block;
left: 0;
right: 0;
width: 100%;
height: 35px;
margin-top: 20px;
color: white;
padding-left: 5px;
border-radius: 3px;
}
.inputmat::-webkit-input-placeholder {
color: white;
}
.inputmat::-moz-placeholder {
color: white;
}
.inputmat:focus{ outline:none;}
.bar { position:relative; display:block; width:100%; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background: #FFF;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
.inputmat:focus ~ .bar:before, .inputmat:focus ~ .bar:after {
width:50%;
}
.group{
position:relative;
}
.button{
width: 200px;
height: 50px;
background: rgba(255,255,255,0.1);
border: 2px solid white;
color: white;
margin-left: auto;
margin-right: auto;
display: block;
cursor: pointer;
margin-top: 30px;
border-radius: 5px;
}
JAVASCRIPT
$(document).ready(function(){
$("#facebook").on("click", function(e){
e.preventDefault;
if(e.target.id == "closeface")
return;
if(e.target.id == "facelogin")
return;
$("#facebook").css("animation","xep 0.2s ease-in").css("animation-fill-mode","forwards").css("z-index","5");
$("#closeface").fadeIn(100);
$("#facelogin").fadeIn(400);
});
});
$(document).ready(function(){
$("#google").on("click", function(e){
e.preventDefault;
if(e.target.id == "closegoogle")
return;
$("#google").css("animation","xep 0.2s ease-in").css("animation-fill-mode","forwards").css("z-index","5");
$("#closegoogle").fadeIn(100);
$("#googlelogin").fadeIn(400);
});
});
$(document).ready(function(){
$("#twitter").on("click", function(e){
e.preventDefault;
if(e.target.id == "closetwitter")
return;
$("#twitter").css("animation","xep 0.2s ease-in").css("animation-fill-mode","forwards").css("z-index","5");
$("#closetwitter").fadeIn(100);
$("#twitterlogin").fadeIn(400);
});
});
$(document).ready(function(){
$("#closeface").on("click", function(){
$("#facebook").css("animation","xep-rev 0.2s linear").css("animation-fill-mode","forwards").css("z-index","0");
$(".facew").fadeIn(200);
$(".close").fadeOut(100);
$("#facelogin").fadeOut(200);
});
});
$(document).ready(function(){
$("#closegoogle").on("click", function(){
$("#google").css("animation","xep-rev 0.2s linear").css("animation-fill-mode","forwards").css("z-index","0");
$(".facew").fadeIn(200);
$(".close").fadeOut(100);
$("#googlelogin").fadeOut(200);
});
});
$(document).ready(function(){
$("#closetwitter").on("click", function(){
$("#twitter").css("animation","xep-rev 0.2s linear").css("animation-fill-mode","forwards").css("z-index","0");
$(".facew").fadeIn(200);
$(".close").fadeOut(100);
$("#twitterlogin").fadeOut(200);
});
});
