<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <div class="container"> <div class="row mt-4"> <h2>Button Modal Login By Monkey-TH.CoM</h2> </div> <div class="row mt-4"> <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#loginFrm">Login</button> </div> <div class="modal fade" id="loginFrm" tabindex="-1" role="dialog" aria-labelledby="loginFrm" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Login...</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="input-group"> <span class="input-group-addon addon-facebook rounded-0"> <i class="fa fa-fw fa-facebook"></i> </span> <button type="button" class="btn btn-block btn-facebook rounded-0 text-left">Login with Facebook</button> </div> <div class="line-or"> <hr /><span>OR</span> </div> <form role="form"> <div class="form-group"> <label for="inputUsernameEmail">Username or email</label> <input type="text" class="form-control" id="inputUsernameEmail"> </div> <div class="form-group"> <a class="pull-right" href="#">Forgot password?</a> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword"> </div> <div class="checkbox pull-left"> <label> <input type="checkbox"> Remember me </label> </div> <div class="pull-right"> <button type="submit" class="btn btn btn-primary"> Log In </button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-block btn-danger rounded-0" data-dismiss="modal">CLOSE</button> </div> </div> </div> </div> </div>

#loginFrm .modal-header { background-color: #1D1E23; color: #C1C1C3; } #loginFrm .modal-header .close { -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; color: #C1C1C3 !important; font-size: 16px; font-weight: normal; } #loginFrm .modal-footer { border: 0px; padding: 0px; overflow: hidden; background-color: #5bc0de; } #loginFrm .modal-footer:hover, #loginFrm .modal-footer:hover button.btn-info { background-color: #31b0d5; border-color: #2aabd2; } #loginFrm .modal-footer button { font-size: 13px; } #loginFrm .modal-footer button.btn-danger { -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .addon-facebook { background-color: #345387 !important; border: none; color: #fff !important; padding: 11px !important; border: 0px !important; } .btn-facebook { background-color: #4b6ea9; color: #fff; } .btn-facebook:hover { background-color: #345387; } .line-or { position: relative; font-size: 18px; color: #E0E0E0; margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; } .line-or span { display: block; position: absolute; left: 50%; top: -4px; margin-left: -25px; background-color: #fff; width: 50px; text-align: center; } .line-or hr { height: 1px; margin-top: 0px; margin-bottom: 0px; }