<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="row base"> <div class="col-md-12"> <!--BOTÃO PARA ABRIR MODAL--> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open Modal</button> <!--BOTÃO PARA ABRIR MODAL FIM--> <!--ÁREA MODAL--> <div class="modal fade bs-example-modal-sm" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">Entrar</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="form"> <div class="form-group"> <label for="recipient-name" class="control-label">Email</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Senha</label> <label for="message-text" class="control-label labelRight"><a href="#">Esqueceu sua Senha?</a></label> <input type="text" class="form-control" id="recipient-name"> </div> <button type="button" class="button btn primary">Entrar</button> <p>- ou -</p> <button type="button" class="button btn facebook">Entrar com Facebook</button> <button type="button" class="button btn twitter">Entrar com Twitter</button> </div> </div> </div> </div> </div> </div> </div> <!--ÁREA MODAL FIM--> </div> </div>

.modal-content {border-radius: 0;box-shadow: none;} .modal-header {border-bottom: 1px solid #F2F2F2;} .modal-body {padding: 30px 15px;} .form .button {width: 100%; margin: 15px 0; padding: 10px 0; border: none;} .form .button.primary {color: #fff; background-color: #22E094; margin: 0 0 15px 0;} .form .button.primary:hover {color: #fff; background-color: #22d68e;} .form .button.facebook {color: #fff; background-color: #4267b2;} .form .button.facebook:hover {color: #fff; background-color: #3f62a8;} .form .button.twitter {color: #fff; background-color: #1da1f2;} .form .button.twitter:hover {color: #fff; background-color: #199ae5;} .form .form-control {margin: 0 0 30px 0; box-shadow: none; background: #F2F2F2; border: none; border-radius: 0;} .form .labelRight{float: right; cursor: pointer;} .form .control-label {margin: 0 0 10px 0;} .form .control-label a {color: #4267b2;} .form .control-label a:hover {color: #1da1f2; text-decoration: none;} .form p {text-align: center;}