<form>
  <label>
    <input type="text" pattern=".{3,}" required title="Enter at least 3 characters.">
    <span>First Name</span>
  </label>
  <button>Submit</button>
</form>

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: dodgerblue;
  transition: all 150ms ease;
}

input {
  border: 2px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
  border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}

input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}


















body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}

form {
  margin: auto;
}

input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}

button {
  border-color: #616161;
  background: #616161;
  color: #f6f7f8;
  text-transform: uppercase;
  letter-spacing: 2px;
}

$('input:empty, textarea:empty').addClass('empty');

$('input').keyup(function () {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});