Animated Google-Style Inputs for a Sleek forms Upgrade!

API & Customization Show & Tell
1

This just helps elevate your forms once active (when you click on it) this animates much like a google type input on a form from…

image
to…

image

This is just a copy and paste job… so enjoy and any questions just leave below in the comments

CSS

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.input, .kn-textarea {
  border-radius:0px;
  border: 1px solid #ffffff0d;
  box-shadow: inset 0px 0px 2px hsla(0, 0%, 4%, 0);
  transition: all 0.2s ease-in;
  display:inline-block;
  resize: both;
  max-height:2000px;
  min-height:40px;
  overflow: hidden; 
}  
.input, .kn-textarea:hover {
  border-radius:0px;
  border: 1px solid #ffffff0d;
  box-shadow: inset 0px 0px 2px hsla(0, 0%, 4%, 0);
} 

.input:hover {
  border-radius:0px;
  border: 1px solid #ffffff0d;
  box-shadow: inset 0px 0px 2px hsla(0, 0%, 4%, 0);
} 

input, textarea {
	display: block;
	width: 100%;
	border: 0;
	padding: 10px 5px;
  background: white no-repeat;
  /* 2 imgs : 1px gray line (normal state) AND 2px green line (focus state) */
	background-image: linear-gradient(to bottom, blue, blue), linear-gradient(to bottom, silver, silver);
	/* sizes for the 2 images (default state) */
	background-size: 0 2px, 100% 1px;
	/* positions for the 2 images. Change both "50%" to "0%" or "100%" and tri again */
	background-position: 50% 100%, 50% 100%;
	/* animation solely on background-size */
    transition: background-size 0.9s cubic-bezier(0.64, 0.09, 0.08, 1);
}

input:focus,
textarea:focus {
  /* sizes for the 2 images (focus state) */
	background-size: 100% 2px, 100% 1px;
	outline: none;
}

.input:focus {
    border-color: #fff!important;
}
6 Likes