<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="loginbox"> <input type="text" placeholder="username" > <div class="separtor"> <i></i> </div> <input type="password" placeholder="password" > <a href="" class="forgot_link">forgot ?</a> <button>Sign in</button> </div>

body { background: #2B3238; } .loginbox { width: 250px; height: auto; margin: auto; margin-top: 10%; } .loginbox input { border: none; background: #fff; font-family: Lato; font-weight: 700; display: block; height: 40px; outline: none; width: 100%; margin: auto; padding: 6px 12px 6px 12px; } .loginbox input[type="text"] { border-radius: 5px 5px 0px 0px; } .loginbox input[type="password"] { border-radius: 0px 0px 5px 5px; } a.forgot_link { color: #666; text-decoration: none; font-size: 11px; position: relative; left: 193px; top: -31px; } a.forgot_link:hover { text-decoration:none; color: #111; } .loginbox button { width: 100%; border-radius: 5px; background: #EA4C89; text-decoration: center; border: none; color: #ffffff; margin-top: -5px; padding-top: 10px; padding-bottom: 10px; outline: none; font-size: 16px; border-bottom: 3px solid #E8377E; cursor: pointer; } .separtor { width: 100%; height: 1px; background: #fff; } .separtor i { width: 95%; margin: auto; height: 1px; display: block; background: #d1d1d1; }