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); }); });
Expand for more options Login