<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row text-center"> <h2>A new way of login</h2> </div> <div class="login-btn">Login</div> <div class="login-bar"> <span class="login-bar-close">×</span> </div> <div class="login-box"> <h3>Login</h3> <form> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-primary btn-block">Submit</button> </form> </div> </div>

body{background-color:#f2f2f2;} .login-btn{ background-color:#4e3e84; position:absolute; left:-55px; top:40%; padding:10px; border-radius:4px; transform:rotate(90deg); width:150px; text-align:center; color:#fff; cursor:pointer; } .login-bar{ background-color:#4e3e84; position:absolute; left:0; top:26%; height:155px; width:0%; z-index:99; } .login-bar-close{ position:absolute; top:-30px; right:10px; font-size:32px; cursor:pointer; } .login-box{ width:500px; height:300px; background-color:#fff; padding:5px 15px; margin:0 auto; z-index:999; position:relative; display:none; } .btn-primary { color: #fff; background-color: #4e3e84; border-color: #4e3e84; }

$(document).ready(function(){ $('.login-btn').click(function(){ $('.login-bar').animate({width: '100%'},'slow',function(){ $('.login-box').show(); }); }); $('.login-bar-close').click(function(){ $('.login-box').hide(); $('.login-bar').animate({width: '0%'},'slow'); }); });