<div class="pagewrap">
  <form class="form" id="form">
    <h3 class="form__title">Login</h3>
    <div class="container">
      <input class="container__input" type="text" id="username" name="username" value="" required>
      <label id="userLabel" for="username" class="container__label">Username</label>
    </div>
    <div class="container">
      <input class="container__input" type="password" id="pass" name="password" value="" required>
      <label id="passLabel" for="pass" class="container__label">Password</label>
    </div>
    <button class="form__submit" id="submit" type="button" value="submit">Submit</button>
  </form>
</div>

*{box-sizing: border-box;margin: 0;padding: 0; outline: none; transition: all 0.3s ease; animation-delay: 0s;}

body {
  background: #74ebd5;
  background: -webkit-linear-gradient(to bottom, #74ebd5, #acb6e5);
  background: linear-gradient(to bottom, #74ebd5, #acb6e5);
  font-size: 16px;
  line-height: 1.2;
  color: #888;
}

.pagewrap {max-width: 100%; height: 100vh; margin: 0 auto; display: flex; justify-content: center; align-items: center;}

.form {
  width: 90%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  background-color: #ecedee;
  border-radius: 5px;
  
  @media (min-width: 600px) {
    max-width: 380px;
  }
  
  @media (min-width: 980px) and (max-width: 1400px) {
    width: 35%;
  }
  
  &__title {
   margin-bottom: 1em;
   position: relative;
   z-index: 2;
   background: transparent;
			text-transform: uppercase;
  }
  
  &__submit {
    margin-top: 1.2em;
    border: none;
    padding: .90em;
    background-color: skyblue;
    color: #fff;
    letter-spacing: 1.2px;
    font-size: .98rem;
    text-transform: uppercase;
    box-shadow: -3px 5px darken(skyblue, 10%);
    cursor: pointer;
				transition: all 0s ease;
			
				&.clicked {
					position: relative;
					top: 10px;
					left: -3px;
					box-shadow: 0px 0px;
				}
   }
}

.container {
  position: relative;
  width: 90%;
  height: 15%;
  margin-top: 1em;
  
  &__input {
  width: 100%;
  height: 100%;
  padding: 1em;
  border: 3px solid #fff;
  background-color: transparent;
  color: #666;
  font-weight: bold;

    &:first-of-type {
      margin-bottom: 1em;
    }
    
			 &:focus + label,
    &:valid + label {
      top: -8px;
      left: 3px;
      width: 30%;
      height: 10%;
      padding: .80em 3.5em;
    }
  }
  
  &__label {
  position: absolute;
  top: -8px;
  left: 3px;
  width: 30%;
  height: 10%;
  padding: .80em 3.5em;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-transform: uppercase;
  font-size: .80rem;  
  
  @media (min-width: 500px) {
      top: 3px;
      left: 3px;
      height: 86%;
      padding: 0;
    }
  }
}

function validate() {
var username = document.getElementById('username').value;
var password = document.getElementById('pass').value;
	
  if (username === "" || username === null) {
    intensify($('#userLabel'));
				return false;
  }
  
  if (password === "" || password === null) {
			 intensify($('#passLabel'));
				return false;
  }
}

function intensify(intense) {
	intense.addClass('animated shakeit').delay(6000).queue(function(){
					intense.removeClass('animated shakeit').dequeue();
				});
}

function clicked() {
	$('button').addClass('clicked').delay(200).queue(function(){
		$('button').removeClass('clicked').dequeue();
	});
}

var submit = document.getElementById('submit');
submit.addEventListener('click', clicked);
submit.addEventListener('click', validate);