<label>Whoops: We've got a big error...</label> 
<div>  
  <input type="text" placeholder="Enter Your Text!" />
</div>
<a href="#">Submit &raquo;</a>
/* Change me to anything!*/
@bg: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/retina_wood.png');

/* is the background light or dark? */
@switch: light;

.textColor(light) {
  color:rgba(0,0,0,.4);
}

.textColor(dark) {
  color:rgba(255,255,255,.3);
}

body {
  background: @bg;
  font-size:100%;
}

/* 
* Disabled for demonstration purposes, should be styled 
*/ 
:focus {
  outline: none;
}

div {
  font-size:100%;
  width: 18em;
  height: 4em;
  border-radius: 2em;
  margin: 10% auto 0 auto;
  /* Note: this pen is prefix free to reduce bloat */
  background: 
    linear-gradient(
      top,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.0) 50%,
      rgba(0,0,0,0.025) 51%,
      rgba(0,0,0,0.15) 100%
    );
}

div input {
  width: 86%;
  height: 2.5em;
  margin: .75em;
  border-radius: 2em;
  border: none;
  /* Change the alpha value on the background to get more or less transparency*/
  background: rgba(255,255,255,.9);
  /* Like a lot or shadow? Add it! */
  box-shadow: inset 0 .10em .10em rgba(0,0,0,.8);
  padding-left: 1em;
  color: rgba(0,0,0,.65);
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 100%;
}

div input.error {
  box-shadow: 
    inset 0 .05em .10em rgba(0,0,0,.8),
    0 0 .20em rgba(150,0,0,.5)
  ;
  color:rgba(150,0,0,.5);
}

div input.correct {
  box-shadow: 
    inset 0 .05em .10em rgba(0,0,0,.8),
    0 0 .20em rgba(0,200,0,.8)
  ;
  color:rgba(0,70,0,.8);
}

label {
  height: 2em;
  width: 16em;
  height: 2.5em;
  border-radius: .25em;
  background: rgba(255,255,255,.5);
  display: block;
  line-height: 2.7em;
  text-align: center;
  margin:  10% auto -10%;
  border: .25em solid rgba(150,0,0,.5);
  border-radius: .5em;
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: bold;
  color: rgba(150,0,0,.75);
  z-index: 100;
  opacity: 0;
}

label:after {
  border: solid .75em transparent;
  border-bottom: 0;
  border-top-color: rgba(150,0,0,.5);
  content: " ";
  display: block;
  margin: 0.05em 0 0 3em;
  overflow: hidden;
  width: 0;
  z-index: 101;
}

/* Swap the variable for light vs. dark backgrounds */
@light: 0 .05em rgba(255,255,255,.5);
@dark: 0 -.05em rgba(0,0,0,.5);

a {
  width: 7em;
  height: 1.75em;
  margin: 1em auto;
  display:block;
  background:
    linear-gradient(
     top,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.0) 50%,
      rgba(0,0,0,0.025) 51%,
      rgba(0,0,0,0.15) 100%
    );
  box-shadow: 0 .05em .05em rgba(0,0,0,.4);
  text-shadow: @@switch;
  font-size: 150%;
  border-radius:1.25em;
  text-align: center;
  line-height:1.9em;
  text-decoration: none;
  .textColor(@switch);
}

a:hover {
  background:
    linear-gradient(
     top,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.0) 50%,
      rgba(0,0,0,0.025) 51%,
      rgba(0,0,0,0.25) 100%
    );
}

a:active {
  box-shadow: inset 0 .05em .05em rgba(0,0,0,.4);
  line-height:2.1em;
}
View Compiled
function validate(input, ele) {
  if(input.length < 5) {
    $(ele).removeClass('correct').addClass('error');
    showLabel();
  } else {
    $(ele).removeClass('error').addClass('correct');
    hideLabel();
  }
}

function showLabel() {
  $('label').animate(
    {
      opacity: 1
    },
    250
  );
}
  
function hideLabel() {
  $('label').animate(
    {
      opacity: 0
    },
    250
  );
}

$('input[type="text"]').blur(function(e){
	e.preventDefault();
  var input = $(this).val();
  var ele = this;
  validate(input, ele);
});

$('a').click(function(e){
	e.preventDefault();
  var input = $('input[type="text"]').val();
  var ele = $('input[type="text"]');
  validate(input, ele);
});
Run Pen

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