Awesome input focus effects

input foucs 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.

[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


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


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

  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;


<script src=""></script>
  $(".col-3 input").val("");
  $(".input-effect input").focusout(function(){
    if($(this).val() != ""){

Output –

input focus output

(Visited 24,791 times, 5 visits today)

Add Comment

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