<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 ----------> <a href="#" data-toggle="modal" data-target="#modalLogin"> <button class="btn btn-custom"> <i> LOGIN </i> </button> </a> <div id="modalLogin" class="modal" role="dialog"> <div class="modal-dialog" id="dialog-login"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Login</h4> </div> <div class="modal-body"> <br /> <form class="form-horizontal" id="form-login" method="POST" action="#"> <fieldset> <div class="form-group"> <div class="col-md-12"> <input id="email" name="email" type="text" placeholder="E-mail" class="form-control input-md"> </div> </div> <div class="form-group"> <div class="col-md-12"> <input id="senha" name="senha" type="password" placeholder="Senha" class="form-control input-md"> </div> </div> <div class="form-group"> <div class="col-md-12"> <label class="checkbox-inline" for="conectado" id="check-conectado"> <input type="checkbox" name="conectado" id="conectado" value="1"> Continuar conectado </label> </div> </div> <div class="form-group"> <div class="col-md-2"> <button id="entrar" name="entrar" class="btn btn-success">Entrar <span class="fa fa-sign-in"></button> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <a href="#" class="pull-left">Esqueci minha senha</a> <button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button> </div> </div> </div> </div> </div>

#dialog-login { width: 20% !important; } .btn-custom { background-color: #FFFFFF !important; color: #FF4500 !important; font-weight: bold !important; border: 2px solid #000000 !important; margin-top: 10px; margin-left: 100px; } .btn-custom-alt { background-color: #FF4500 !important; color: #FFFFFF !important; font-weight: bold !important; border: 2px solid #000000 !important; } .btn-custom-alt:hover { background-color: #FFFFFF !important; color: #FF4500 !important; font-weight: bold !important; border: 2px solid #000000 !important; } .btn-custom:hover { background-color: #FF4500 !important; color: #FFFFFF !important; font-weight: bold !important; border: 2px solid #000000 !important; } .modal-header { border: none !important; background: #FF4500 !important; color: #FFFFFF !important; font-weight: bold !important; }