Input Text Box Effects in CSS

Input text box element styles, animation & hover effects . E.g. shutter effects, glow effects, border animations etc...

Techmates 16 Feb, 2018 12709

In this post, we will explore the various kinds of styles/effects on the input text box. This demo will show you the basic shadow(inset/outset) effect, Spread shadow effect, Glow effect using shadow, Border animations, Shutter(in/out) effects, and border-bottom animations.

You can modify the CSS/snippet according to your need. The demo is crafted using pure CSS.

-We will use a form-input class for all input & combined the other classes to change the effects.

HTML

<input type="text" class="form-input basic" placeholder="DD - Design Drastic">
<input type="text" class="form-input basic smooth-corner" placeholder="DD - Design Drastic">
<input type="text" class="form-input basic round" placeholder="DD - Design Drastic">
<input type="text" class="form-input basic shadow-inset" placeholder="DD - Design Drastic">
<input type="text" class="form-input basic smooth-corner shadow-inset" placeholder="DD - Design Drastic">
<input type="text" class="form-input basic round shadow-inset" placeholder="DD - Design Drastic">
<input type="text" class="form-input spread-shadow" placeholder="DD - Design Drastic">
<input type="text" class="form-input spread-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="text" class="form-input spread-shadow round" placeholder="DD - Design Drastic">
<input type="text" class="form-input glow-shadow" placeholder="DD - Design Drastic">
<input type="text" class="form-input glow-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="text" class="form-input glow-shadow round" placeholder="DD - Design Drastic">
<input type="text" class="form-input border-dashed" placeholder="DD - Design Drastic">
<input type="text" class="form-input border-dashed smooth-corner" placeholder="DD - Design Drastic">
<input type="text" class="form-input border-dashed round" placeholder="DD - Design Drastic">
<input type="text" class="form-input shutter" placeholder="DD - Design Drastic">
<input type="text" class="form-input shutter smooth-corner" placeholder="DD - Design Drastic">
<input type="text" class="form-input shutter round" placeholder="DD - Design Drastic">
<input type="text" class="form-input shutter-in" placeholder="DD - Design Drastic">
<input type="text" class="form-input shutter-in smooth-corner" placeholder="DD - Design Drastic">

<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation left"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation right"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation center"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation both-side"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-1" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-2" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-3" placeholder="DD - Design Drastic">
	<span class="border-line-animation top"></span>
	<span class="border-line-animation left"></span>
	<span class="border-line-animation bottom"></span>
	<span class="border-line-animation right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-4" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

CSS

* {
	box-sizing: border-box;
}
.form-group {
	position: relative;
}
.form-input {
	position: relative;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 600;
	width: 100%;
	height: 40px;
	border: none;
	padding: 0 10px;
	box-shadow: none;
	outline: none;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.form-input.smooth-corner {
	border-radius: 5px;
}
.form-input.round {
	border-radius: 50px;
}
.form-input.basic {
	border: 2px solid rgba(0, 0, 0, .15);
}
.form-input.basic:hover {
	border-color: rgba(0, 0, 0, .35);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.form-input.basic:focus {
	border-color: #4285F4;
	box-shadow: 0 0 10px rgba(66, 133, 244, .5);
}
.form-input.basic.shadow-inset:hover {
	box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
}
.form-input.basic.shadow-inset:focus {
	box-shadow: 0 0 10px rgba(66, 133, 244, .5) inset;
}
/* Spread shadow */
.form-input.spread-shadow {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.spread-shadow:focus {
	background: #fff;
	box-shadow: 0 0 40px 5px rgba(0, 0, 0, .2);
}
/* Glow shadow */
.form-input.glow-shadow {
	border: 0;
	background: rgba(0, 0, 0, .1);
}
.form-input.glow-shadow:focus {
	box-shadow: 0 0 0 2px #4285F4;
	background: #fff;
	border-color: #4285F4;
}
/* Chagne Border */
.form-input.border-dashed {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.border-dashed:focus {
	border: 2px dashed #999;
	background: #fff;
	border-color: #4285F4;
}
/* Shutter */
.form-input.shutter {
	border: 2px solid rgba(0, 0, 0, .15);
	box-shadow: 0 20px 0 0 #d5d5d5 inset, 0 -20px 0 0 #d5d5d5 inset;
}
.form-input.shutter:focus {
	box-shadow: none;
	border-color: rgba(0, 0, 0, .3);
}

.form-input.shutter-in {
	border-bottom: 2px solid rgba(0, 0, 0, .2);
	background: transparent;
}
.form-input.shutter-in:focus {
	border-color: rgba(0, 0, 0, .3);
	box-shadow: 0 -50px 0 #d5d5d5 inset;
}

/* Border bottom effects */
.form-input.border-bottom {
	position: relative;
	background: transparent;
	padding: 0;
	border-bottom: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-bottom ~ .border-bottom-animation {
	position: absolute;
	content: "";
	width: 0;
	background: rgba(0, 0, 0, .2);
	height: 2px;
	z-index: 99;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
/* Border bottom left */
.form-input.border-bottom ~ .border-bottom-animation.left {
	left: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.left {
	background: #4285F4;
	width: 100%;
}
/* Border bottom right */
.form-input.border-bottom ~ .border-bottom-animation.right {
	right: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.right {
	background: #4285F4;
	width: 100%;
}
/* Border bottom center */
.form-input.border-bottom ~ .border-bottom-animation.center {
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.center {
	background: #4285F4;
	width: 100%;
}
/* Border bottom both side */
.form-input.border-bottom ~ .border-bottom-animation.both-side {
	height: 0px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	position: absolute;
	content: " ";
	bottom: 0;
	width: 0;
	height: 2px;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before {
	left: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	right: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:after {
	background: #4285F4;
	width: 50%;
}

/* Border Animations */
/* Style 1 */
.form-input.border-animation {
	border: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after{
	position: absolute;
	content: " ";
	right: 0;
	background: #4285F4;
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after
 {
	width: 0;
	height: 2px;
}
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after
 {
	width: 2px;
	height: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:before {
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:after {
	top: 0;
	right: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:before {
	left: 0;
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:after {
	top: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

/* Set 2 */
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:before {
	left: 50%;
	bottom: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:after {
	top: 0;
	left: 50%;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:before {
	top: 50%;
	left: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:after {
	top: 50%;
	right: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
	left: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:after {
	height: 100%;
	top: 0;
}

/* Set 3 */
.form-input.border-animation.set-3 ~ .border-line-animation.top:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.top:after {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:before {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:after {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:before {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:after {
	width: 100%;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:after {
	height: 100%;
}

/* Set 4 */

.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:before {
	left: 0;
	bottom: 0;
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before {
	transition-delay: 0s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:after {
	right: 0;
	bottom: 0;
	transition-delay: 1s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	transition-delay: .5s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:after {
	right: 0;
	top: 0;
	transition-delay: .5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	transition-delay: 1s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:before {
	left: 0;
	top: 0;
	transition-delay: 0;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before {
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

CSS

.form-group {
	box-sizing: border-box;
	position: relative;
}
.form-input {
	position: relative;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 600;
	width: 100%;
	height: 40px;
	border: none;
	padding: 0 10px;
	box-shadow: none;
	outline: none;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.form-input.smooth-corner {
	border-radius: 5px;
}
.form-input.round {
	border-radius: 50px;
}
.form-input.basic {
	border: 2px solid rgba(0, 0, 0, .15);
}
.form-input.basic:hover {
	border-color: rgba(0, 0, 0, .35);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.form-input.basic:focus {
	border-color: #4285F4;
	box-shadow: 0 0 10px rgba(66, 133, 244, .5);
}
.form-input.basic.shadow-inset:hover {
	box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
}
.form-input.basic.shadow-inset:focus {
	box-shadow: 0 0 10px rgba(66, 133, 244, .5) inset;
}
/* Spread shadow */
.form-input.spread-shadow {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.spread-shadow:focus {
	background: #fff;
	box-shadow: 0 0 40px 5px rgba(0, 0, 0, .2);
}
/* Glow shadow */
.form-input.glow-shadow {
	border: 0;
	background: rgba(0, 0, 0, .1);
}
.form-input.glow-shadow:focus {
	box-shadow: 0 0 0 2px #4285F4;
	background: #fff;
	border-color: #4285F4;
}
/* Chagne Border */
.form-input.border-dashed {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.border-dashed:focus {
	border: 2px dashed #999;
	background: #fff;
	border-color: #4285F4;
}
/* Shutter */
.form-input.shutter {
	border: 2px solid rgba(0, 0, 0, .15);
	box-shadow: 0 20px 0 0 #d5d5d5 inset, 0 -20px 0 0 #d5d5d5 inset;
}
.form-input.shutter:focus {
	box-shadow: none;
	border-color: rgba(0, 0, 0, .3);
}

.form-input.shutter-in {
	border-bottom: 2px solid rgba(0, 0, 0, .2);
	background: transparent;
}
.form-input.shutter-in:focus {
	border-color: rgba(0, 0, 0, .3);
	box-shadow: 0 -50px 0 #d5d5d5 inset;
}

/* Border bottom effects */
.form-input.border-bottom {
	position: relative;
	background: transparent;
	padding: 0;
	border-bottom: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-bottom ~ .border-bottom-animation {
	position: absolute;
	content: "";
	width: 0;
	background: rgba(0, 0, 0, .2);
	height: 2px;
	z-index: 99;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
/* Border bottom left */
.form-input.border-bottom ~ .border-bottom-animation.left {
	left: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.left {
	background: #4285F4;
	width: 100%;
}
/* Border bottom right */
.form-input.border-bottom ~ .border-bottom-animation.right {
	right: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.right {
	background: #4285F4;
	width: 100%;
}
/* Border bottom center */
.form-input.border-bottom ~ .border-bottom-animation.center {
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.center {
	background: #4285F4;
	width: 100%;
}
/* Border bottom both side */
.form-input.border-bottom ~ .border-bottom-animation.both-side {
	height: 0px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	position: absolute;
	content: " ";
	bottom: 0;
	width: 0;
	height: 2px;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before {
	left: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	right: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:after {
	background: #4285F4;
	width: 50%;
}

/* Border Animations */
/* Style 1 */
.form-input.border-animation {
	border: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after{
	position: absolute;
	content: " ";
	right: 0;
	background: #4285F4;
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after
 {
	width: 0;
	height: 2px;
}
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after
 {
	width: 2px;
	height: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:before {
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:after {
	top: 0;
	right: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:before {
	left: 0;
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:after {
	top: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

/* Set 2 */
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:before {
	left: 50%;
	bottom: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:after {
	top: 0;
	left: 50%;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:before {
	top: 50%;
	left: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:after {
	top: 50%;
	right: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
	left: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:after {
	height: 100%;
	top: 0;
}

/* Set 3 */
.form-input.border-animation.set-3 ~ .border-line-animation.top:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.top:after {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:before {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:after {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:before {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:after {
	width: 100%;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:after {
	height: 100%;
}

/* Set 4 */

.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:before {
	left: 0;
	bottom: 0;
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before {
	transition-delay: 0s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:after {
	right: 0;
	bottom: 0;
	transition-delay: 1s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	transition-delay: .5s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:after {
	right: 0;
	top: 0;
	transition-delay: .5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	transition-delay: 1s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:before {
	left: 0;
	top: 0;
	transition-delay: 0;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before {
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

You can create some stunning input box effects using this demo.

Credits / Resources

Icons: Material Design Icons-MDI (https://materialdesignicons.com/)

Related Snippets

Card Design and Transformation using Perspective css

Techmates 27 Jan, 2020 3840

html, css, creative ...

Card hover effects - reveal details on card hover

Techmates 24 Mar, 2020 4701

html, css, creative ...

Creative Link Effects CSS

Techmates 04 Mar, 2020 4556

css, creative, animation ...

Text Hover Animation CSS

Yogesh 20 Dec, 2019 3656

creative, animation, hover ...

Dd

Input Text Box Effects in CSS

Input text box element styles, animation & hover effects . E.g. shutter effects, glow effects, border animations etc...

HTML

CSS

CSS

Credits / Resources

Related Snippets

Card Design and Transformation using Perspective css

Card hover effects - reveal details on card hover

Creative Link Effects CSS

Text Hover Animation CSS

Themes

Mockups

Dd

Input Text Box Effects in CSS

Input text box element styles, animation & hover effects . E.g. shutter effects, glow effects, border animations etc...

HTML

CSS

CSS

Credits / Resources

Related Snippets

Card Design and Transformation using Perspective css

Card hover effects - reveal details on card hover

Creative Link Effects CSS

Text Hover Animation CSS

Themes

Mockups

Newsletter