Awesome input focus effects

After very long time, I share with you awesome input focus effects using css3 and jquery. In the previous month I had published ultimate image hover effects which are totally unique and new in the market. In the current days, web designer want a comment like WOW or Awesome from the user which is possible to design creative and unique. So I create some awesome focus effects for inputs, all these effects creating by using css3 and input with label effects contains jquery also.

In this tutorial, you see input border, background, placeholder effects on focus. And also see placeholder move as a label on input focus.

Here is single example if you want quick try and use. Try it

HTML –

<div class="col-3 input-effect">
   <input class="effect-1" type="text" placeholder="" />
   <label>First Name</label>
</div>

CSS –

.col-3{
  float: left;
  width: 27.33%;
  margin: 40px 3%;
  position: relative; /* necessary to give position: relative to parent. */
}
input[type="text"]{
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.effect-1{
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
}

.effect-1 ~ .focus-border{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3399FF;
  transition: 0.4s;
}

.effect-1:focus ~ .focus-border,
.has-content.effect-1 ~ .focus-border{
  width: 100%;
  transition: 0.4s;
}

.effect-1 ~ label{
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}

.effect-1:focus ~ label,
.has-content.effect-1 ~ label{
  top: -16px;
  font-size: 12px;
  color: #3399FF;
  transition: 0.3s;
}

JQUERY –

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(window).load(function(){
  $(".col-3 input").val("");
  $(".input-effect input").focusout(function(){
    if($(this).val() != ""){
      $(this).addClass("has-content");
    }else{
    $(this).removeClass("has-content");
    }
  });
});
</script>

Output –