Tumbler Like Login-Signup With jQuery

Have you ever seen tumbler.com login page. It is very clean and simple one. I really liked it a lot. I wanted to create clone of it.
In this post let's create tumbler like login, signup form with simple jQuery, css3 and html5 code.
Take a look at demo below.
Tumbler Like Login-Signup With jQuery


demo

download

Folder structure

Create file and folder structure as below.

index.html

<html>  
<head>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  
<link rel="stylesheet" type="text/css" href="css/style.css">  
<script type="text/javascript" src="js/scripts.js"></script>  
</head>  
<body>  
<div class="wrapper">  
<div class="top_buttons">  
<button id="login" class="">Log in</button>  
<button id="cancel" class="">Cancel</button>  
<button id="signup" class="">Sign up</button>  
</div>  
<div class="box">  
<a class="logo"><img src="img/logo.png" alt="techumber" width="196" height="44" /></a>  
<form id="signup_form">  
<div class="container">  
<input id="email" type="text" placeholder="Email">  
<input id="pass" type="password" placeholder="Password" />  
<input id="user" type="text" placeholder="UserName" />  
</div>  
<div class="error">please enter correct messag</div>  
<button id="start" class="blue">Start</button>  
</form>  
</div>  
</div>  
</body>  
</html> 

Style.css

body{  
background: #395875;  
font: normal 14px/1.4 Helvetica,Arial,sans-serif;  
color: #444;  
margin: 0px;  
} 
.wrapper{ 
margin: 0 auto;  
width: 960px;  
} 
.top_buttons{ 
margin: 0 20px 0 0;  
position: relative;  
float: right;  
clear: right;  
} 
.logo{ 
padding-left: 15px;  
} 
.top_buttons button{ 
display: block;  
float: left;  
cursor: pointer;  
font-size: 15px;  
font-weight: bold;  
min-width: 100px;  
padding: 0 20px;  
line-height: 35px;  
height: 37px;  
border: 1px solid rgba(0, 0, 0, 0.29);  
border-radius: 8px;  
background: rgba(177, 211, 255, 0.11);  
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.25); 
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.25); 
box-shadow: inset 0 1px 0 0 rgba(255,255,255,.25);  
color: #fff;  
margin: 20px 20px 20px 0px;  
} 
.box{ 
display: block;  
position: fixed;  
top: 25%;  
left: 50%;  
opacity: 1;  
margin: 71px 0 0 -122px;  
width: 245px;  
padding: 0 0 60px 0;  
z-index: 3;  
} 
.box h1{ 
color:#fff;  
font-weight: bolder;  
} 
.container{ 
margin: 0;  
padding: 0;  
border: 1px solid #CCC;  
border: 1px solid rgba(0, 0, 0, 0.8);  
overflow: hidden;  
background: #DDE5ED;  
background: -moz-linear-gradient(top,rgba(221, 229, 237, 1) 0,rgba(242, 243, 244, 1) 100%);  
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(221, 229, 237, 1)),color-stop(100%,rgba(242, 243, 244, 1)));  
background: -webkit-linear-gradient(top,rgba(221, 229, 237, 1) 0,rgba(242, 243, 244, 1) 100%);  
background: -o-linear-gradient(top,rgba(221, 229, 237, 1) 0,rgba(242, 243, 244, 1) 100%);  
background: -ms-linear-gradient(top,rgba(221, 229, 237, 1) 0,rgba(242, 243, 244, 1) 100%);  
background: linear-gradient(top,rgba(221, 229, 237, 1) 0,rgba(242, 243, 244, 1) 100%);  
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px;  
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.36),0 1px 0 rgba(255,255,255,0.15); 
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.36),0 1px 0 rgba(255,255,255,0.15); 
box-shadow: inset 0 1px 3px rgba(0,0,0,0.36),0 1px 0 rgba(255,255,255,0.15);  
-webkit-background-clip: padding-box; 
} 
#signup_form input{ 
width: 100%;  
padding: 11px 10px 9px 10px;  
margin: 0px;  
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;  
border-top: 1px solid #CCC;  
border-top: 1px solid rgba(0, 0, 0, 0.12);  
background: 0;  
font: bold 14px/1.4 Helvetica,Arial,sans-serif;  
outline: none;  
} 
#signup_form button{ 
text-align: center;  
font-size: 15px;  
font-weight: bold;  
line-height: 35px;  
width: 100%;  
margin: 15px 0 0 0;  
font-size: 16px;  
text-align: center;  
font-weight: bold;  
padding: 0 20px;  
line-height: 35px;  
height: 37px;  
color: #fff;  
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
border-radius: 6px;  
cursor: pointer;  
} 
.error{ 
text-align: center;  
padding: 8px 15px;  
font-size: 12px;  
font-family: Helvetica,sans-serif;  
line-height: 16px;  
font-weight: bold;  
color: #EFEFEF;  
color: rgba(255, 255, 255, 0.8);  
border: 1px solid rgba(0, 0, 0, .18);  
-webkit-border-radius: 6px; 
margin: 10px 0px 10px 0px;  
} 
.blue { 
border-color: #4A7C9F;  
background: #6AA5CF;  
background: -moz-linear-gradient(top,#6AA5CF 0,#5791BB 100%);  
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6AA5CF),color-stop(100%,#5791BB));  
background: -webkit-linear-gradient(top,#6AA5CF 0,#5791BB 100%);  
background: -o-linear-gradient(top,#6AA5CF 0,#5791BB 100%);  
background: -ms-linear-gradient(top,#6AA5CF 0,#5791BB 100%);  
background: linear-gradient(top,#6AA5CF 0,#5791BB 100%);  
} 

Scripts.js

$(function() { 
$("#login").hide(); 
$("#user").hide(); 
$(".error").hide(); 
//Click event on signup button 
$("#signup").click(function(){ 
$("#user").slideToggle(100); 
$("#login").toggle(); 
$("#signup").toggle(); 
}); 
//Click event on login button 
$("#login").click(function(){ 
$("#user").slideToggle(100); 
$("#login").toggle(); 
$("#signup").toggle(); 
}); 
$("#start").click(function(e){ 
if($("#email").val()=="" || $("#pass").val()==""){  
$(".error").slideToggle(1000); 
e.preventDefault();  
} 
else{  
e.preventDefault();  
$(".box").html("<h1>Thank you!<h1>"); 
} 
}); 
}); 

That's it.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.