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.

focus-effects

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

[su_note note_color=”#fafaf7″ radius=”5″ class=”post-note”]CSS :focus selector allowed to assign css property to element on mouse enter.[/su_note]

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 –

input focus output

2 comments

Add Comment

Required fields are marked *. Your email address will not be published.