<div class="container loginForm">
  <div class="">
    <h1>Login</h1>
    <form>
      <div class="form-group has-feedback">
        <input type="email" class="form-control form-input" id="" placeholder="" required>
       <label class="form-label" for="">username</label>
       <span class="glyphicon form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control form-input" id="" placeholder="" required>
       <label class="form-label" for="">password</label>
       <span class="glyphicon form-control-feedback"></span>
      </div>
    </form>
    <div class="form-inline">
      <div class="form-group pull-right">
        <label id="" class="loginPwReset">
          <a href="#">Forgot Passwort ?</a>
        </label>
      </div>
    </div>
    <button id="submit" type="submit" class="btn btn-default submit" value="Login">Login</button>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Lobster|Mako');

body {
  font-family: 'Mako', sans-serif;
    letter-spacing: .1em;
  text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  background-color: #dffeff;
  color: #32797c;
}
h1 {
  font-family: 'Lobster', cursive;
  padding: 5% 0 7% 0;
}
a {
  color: #32797c;
}
a:focus, a:hover {
  color: #009898;
}
.btn-default {
  border-color: transparent;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
  outline: 0 auto -webkit-focus-ring-color;
  outline-offset: 0;
}
.form-group {
  height: 50px;
}
.form-control {
    font-size: 100%;
    letter-spacing: .07em;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 1px transparent;
}
:focus {
    outline: -webkit-focus-ring-color auto 0;
}
.form-control:focus {
    -webkit-box-shadow: inset 0 1px 1px transparent, 0 0 8px transparent;
    box-shadow: inset 0 1px 1px transparent, 0 0 8px transparent;
}
.form-label {
  position: absolute;
  pointer-events:none;
  top: 3px;
  font-size: 110%;
  transition: .2s ease all; 
  -moz-transition: .2s ease all; 
  -webkit-transition: .2s ease all;
}
.form-input:focus ~ .form-label, 
.form-input:valid ~ .form-label     {
    top:-17px;
    font-size: 95%;
}
.has-success .form-control-feedback {
   color: #4cbd38;
}
.has-warning .form-control-feedback {
   color: #dab91a;
}
.has-error .form-control-feedback {
   color: #ec2824;
}
/*================== LOGIN ==================*/
.loginForm {
  position: absolute;
  left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    margin: 0 auto;
}
.loginForm .form-control {
    background-color: transparent;
    border-bottom: 2px solid #32797c;
    border-radius: 0;
    padding-left: 0;
}
.loginForm .form-control:focus {
    border-color: transparent;
    border-bottom: 2px solid #9c9e9f;
}
.submit {
  margin-top: 4%;
  margin-bottom: 1%;
  width: 100%;
  font-size: 100%;
  letter-spacing: .1em;
  color: #32797c;
  background-color: #9cdfe2;
}
.btn-default.focus,
.btn-default.submit:focus,
.btn-default.submit:hover {
  color: #fff;
  background-color: #009898;
  border-color: transparent;
}
.loginPwReset {
  margin-top: .625em;
}