<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class = "container"> <div class="wrapper"> <form action="" method="post" name="Login_Form" class="form-signin"> <div class="row text-center bol"><i class="fa fa-circle"></i></div> <h3 class="form-signin-heading text-center"> <img src="http://codigocomcafe.com.br/demo/form/image/logo.png" alt=""/> </h3> <hr class="spartan"> <div class="input-group"> <span class="input-group-addon" id="sizing-addon1"> <i class="fa fa-user"></i> </span> <input type="text" class="form-control" name="Username" placeholder="Username" required="" autofocus="" /> </div> <div class="input-group"> <span class="input-group-addon" id="sizing-addon1"> <i class="fa fa-lock"></i> </span> <input type="password" class="form-control" name="Password" placeholder="Password" required=""/> </div> <button class="btn btn-lg btn-primary btn-block" name="Submit" value="Entrar" type="Submit">Entrar</button> </form> </div> </div>

.wrapper{ margin-top: 45px; } .form-signin{ max-width: 420px; padding: 30px 38px 66px; margin: 0 auto; border: 1px solid #cccccc; } .input-group{ height: 45px; margin-bottom: 15px; border-radius: 0px; color: #60B99A; } .form-control{ height: 45px; color: #60B99A; } .input-group:hover span i{ color: #60B99A; } .btn-block{ border-radius: 0px; margin-top: 25px; background-color: #60B99A; border: none; } .btn-block:hover{ background-color: #D3CE3D; } .bol{ position: relative; margin-top: -40px; color: #60B99A; }