<div class="form">


<form action="#">
  <div class="text-input">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" placeholder="" />
    <span class="separator"> </span>
  </div>   
  
    <div class="text-input">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="" />
    <span class="separator"> </span>
  </div>  

  <div class="form-bottom">
    <input type="submit" id="submit" value="Submit"  />

  
  <a href="https://hub.docker.com/login/" class="original-src">Original Source</a>
    </div>
</form>  
  
  

</div>
/**
*Those Vars
*/
$page-bg: #282F32;
$light-blue: #3599FF;
$bright-blue: #68B3FF;
$light-gray: #999;
//$curve: cubic-bezier(0, 0, 0.52, 1.11);
$curve: linear;

.form{
  width: 400px;
  margin: 0 auto;
  text-align: left;
  margin-top: 10em;
  
  label{
    display: block;
    text-align: left;
    color: white;
    font-size: .875em;
  }
  
  form{
    
    .text-input{
      overflow: hidden;  
       margin-bottom: .875em;
    }
    
    input[type="text"],
    input[type="password"]{
      width: 100%;
      padding: 1em 0 12px;
      padding-left: 0;
      background: none;
      color: white;
      font-size: 1.2em;
      font-weight: 400;
      border: none;
      border-bottom: 1px solid $light-gray;
      
          
      /*Some sibling magic happens */
      &:focus + .separator {
       transform: scaleX(1) translateY(-2px);   
         opacity: 1;
      }
      
    }
    
    input[type="submit"]{
      color: white;
      background: $light-blue;
      padding: 1em 1.4em;
      font-size: 1.2em;
      border:none;
      border-radius: 10px;
    }
  }
}

.separator {
  height:3px;
  width: 100%;
  background: $bright-blue;
  display: block;
  transform: scaleX(0) translateY(-2px);
  transform-origin: 50%;
  opacity: 0;
  transition: all .15s $curve;
}

/**
* Form Reset - remove focus highlighting
*/

* :focus {
  outline-color: transparent;
  outline-style: none;
}

body {
  font-family: Roboto;
  background: $page-bg;
  
  a {
    color: $light-blue;
    font-size: 1em;
    text-decoration: none;
  }
}

.form-bottom{
  margin-top:1.25em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/**
* Prevent button action, since this isn't a real form
*
*/

document.getElementById('submit').addEventListener('click', function(e) {
  e.preventDefault();

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js