<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-fluid"> <div class="row"> <div class="well center-block"> <div class="well-header"> <center><img src="http://www.kisanpoint.com/mrb/includes/images/design_stuff/default_user_icon.png" class="img-thumbnail img-circle img-responsive" height="80px;" width="80px;"></center> <h1 class="text-center" style="color: white;">Login</h1><hr> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </div> <input type="text" placeholder="User Name" id="uname" name="uname" class="form-control"> <div class="input-group-btn"> <button type="button" id="remove" data-val="1" class="btn btn-default btn-md"> <span class="glyphicon glyphicon-remove"></span></button> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </div> <input type="password" id="pwd" class="form-control" placeholder="Password" name="pass"> <span class="input-group-btn"> <button class="btn btn-default btn-md" id="showhide" data-val='1'><span id='eye' class="glyphicon glyphicon-eye-open"></span></button> </span> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-6 col-sm-6 col-md-6"> <input type="checkbox" name="check" checked> Remember Me </div> <div class="col-xs-6 col-sm-6 col-md-6"> <a href="#"> Join Us Now! </a> </div> </div> </div> <br> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-6 col-sm-6 col-md-6"> <button type="submit" class="btn btn-lg btn1 btn-block"> Login</button> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <a href="https://www.facebook.com/" target="_blank" class="btn btn2 btn-primary btn-block btn-lg"> Login with FB</a> </div> </div> </div> </div> </div> </div> </div> </div>

.well { padding: 35px; padding-left: 30px; box-shadow: 0 0 50px #666666; margin: 7% auto 0; width: 450px; background: rgba(0.4, 0, 0, 0.4); } .btn1 { background-color: #FF3838; color: white; transition: all 0.5s; } .btn1:hover, .btn1:focus { background-color: white; color: black; border: 1px solid; border-color: #FF3838; transition: 0.5s; } a:hover { text-decoration: none; color: red; } body { background: url('http://cdn.pcwallart.com/images/nature-wallpapers-high-resolution-wallpaper-4.jpg'); } .well-header { background-color: #FF3838; } .input-group-addon { background-color: #FF3838; border-color: #FF3838; color: white; } .btn2 { transition: all 0.5s; } .btn2:hover, .btn2:focus { border-color: #428bca; color: black; background-color: white; transition: 0.5s; }

$(document).ready(function() { $("#showhide").click(function() { if ($(this).data('val') == "1") { $("#pwd").prop('type','text'); $("#eye").attr("class","glyphicon glyphicon-eye-close"); $(this).data('val','0'); } else { $("#pwd").prop('type', 'password'); $("#eye").attr("class","glyphicon glyphicon-eye-open"); $(this).data('val','1'); } }); }); $(document).ready(function() { $("#remove").click(function() { $("#uname").val(''); }); });