Отличный набор :active и :focus эффектов CSS

Набор :active и :focus эффектов для полей ввода реализованных с помощью CSS.

Каждый из этих вариантов сможет отлично освежить и украсить любую форму ввода вашего сайта.

HTML

<div class="main">
 <input type="text" placeholder=".fade-border" class="fade-border"/>
 <input type="text" placeholder=".fade-border" class="fade-border"/>
 <input type="text" placeholder=".fade-border" class="fade-border"/>
 
 <input type="text" placeholder=".fade-in-border" class="fade-in-border"/>
 <input type="text" placeholder=".fade-in-border" class="fade-in-border"/>
 <input type="text" placeholder=".fade-in-border" class="fade-in-border"/>

 <input type="text" placeholder=".fade-background" class="fade-background"/>
 <input type="text" placeholder=".fade-background" class="fade-background"/>
 <input type="text" placeholder=".fade-background" class="fade-background"/>
 
 <input type="text" placeholder=".kiss-in" class="kiss-in"/>
 <input type="text" placeholder=".kiss-in" class="kiss-in"/>
 <input type="text" placeholder=".kiss-in" class="kiss-in"/>
 
 <input type="text" placeholder=".kiss-out" class="kiss-out"/>
 <input type="text" placeholder=".kiss-out" class="kiss-out"/>
 <input type="text" placeholder=".kiss-out" class="kiss-out"/>
 
 <input type="text" placeholder=".popping-border" class="popping-border"/>
 <input type="text" placeholder=".popping-border" class="popping-border"/>
 <input type="text" placeholder=".popping-border" class="popping-border"/>
</div> 
<div class="download-pack">
 <a href="http://lucasbonomi.com/download/css/active_and_focus.min.css1.2.zip" target="_blank" class="btn">Download</a>
</div>
<small> - <a href="http://twitter.com/lukyvj" target="_blank">@LukyVj</a> - </small>

CSS

html, body {
 background: #54d7ba;
}
html code, body code {
 background: transparent;
 color: white;
}
html small, body small {
 color: #ffffff;
 float: left;
 text-align: center;
 width: 100%;
}
html small a, body small a {
 color: #fff;
}

.download-pack {
 width: 80%;
 margin: auto;
 text-align: center;
}
.download-pack .btn {
 min-width: 240px;
 padding: .6em;
 border: 2px solid white;
 margin-top: -6em;
 color: #fff;
 cursor: pointer;
}
.download-pack .btn:hover {
 background: white;
 color: #54d7ba;
}

.main {
 width: 80%;
 margin: 4.5em auto;
 color: white;
}
.main h1 {
 padding: .2em;
 margin-bottom: 0em;
 text-align: center;
}
.main input {
 width: 30%;
 margin: 2em 1.25%;
 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 -o-appearance: none;
 appearance: none;
 border: 0;
 background: transparent;
 border: 2px solid white;
 padding: .25em .65em;
 outline: none;
 color: white;
 border-radius: 0px;
}
.main input::-webkit-input-placeholder {
 color: white;
 text-align: center;
}
.main input:-moz-placeholder {
 color: white;
 text-align: center;
}
.main input::-moz-placeholder {
 color: white;
 text-align: center;
}
.main input:-ms-input-placeholder {
 color: white;
 text-align: center;
}
.main input:nth-child(1) {
 margin-left: 0 !important;
}
.main input.fade-border:active, .main input.fade-border:focus {
 -webkit-animation: fade 0.55s ease-in;
 -moz-animation: fade 0.55s ease-in;
 animation: fade 0.55s ease-in;
}
.main input.fade-in-border:active, .main input.fade-in-border:focus {
 -webkit-animation: fade-in 0.55s ease-in;
 -moz-animation: fade-in 0.55s ease-in;
 animation: fade-in 0.55s ease-in;
}
.main input.fade-background:active, .main input.fade-background:focus {
 -webkit-animation: background 0.55s ease-in;
 -moz-animation: background 0.55s ease-in;
 animation: background 0.55s ease-in;
 background: white;
 color: #54d7ba;
}
.main input.fade-background:active::-webkit-input-placeholder, .main input.fade-background:focus::-webkit-input-placeholder {
 color: #54d7ba;
 text-align: center;
}
.main input.fade-background:active:-moz-placeholder, .main input.fade-background:focus:-moz-placeholder {
 color: #54d7ba;
 text-align: center;
}
.main input.fade-background:active::-moz-placeholder, .main input.fade-background:focus::-moz-placeholder {
 color: #54d7ba;
 text-align: center;
}
.main input.fade-background:active:-ms-input-placeholder, .main input.fade-background:focus:-ms-input-placeholder {
 color: #54d7ba;
 text-align: center;
}
.main input.kiss-in:active, .main input.kiss-in:focus {
 -webkit-animation: kiss-in 0.45s ease-out;
 -moz-animation: kiss-in 0.45s ease-out;
 animation: kiss-in 0.45s ease-out;
}
.main input.kiss-out:active, .main input.kiss-out:focus {
 -webkit-animation: kiss-out 0.45s ease-out;
 -moz-animation: kiss-out 0.45s ease-out;
 animation: kiss-out 0.45s ease-out;
}
.main input.popping-border:active, .main input.popping-border:focus {
 -webkit-animation: popping-border 0.45s ease-out;
 -moz-animation: popping-border 0.45s ease-out;
 animation: popping-border 0.45s ease-out;
 box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.5);
 -webkit-transition: all 0.45s ease-out, box-shadow 0.45s ease 0.35s;
 -moz-transition: all 0.45s ease-out, box-shadow 0.45s ease 0.35s;
 transition: all 0.45s ease-out, box-shadow 0.45s ease 0.35s;
}

@-webkit-keyframes fade {
 0% {
 box-shadow: 0 0 0 0 transparent;
 }

 66% {
 box-shadow: 0 0 0 10px #54d7ba, 0 0 0 12px white;
 }

 100% {
 box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
 }
}
@-moz-keyframes fade {
 0% {
 box-shadow: 0 0 0 0 transparent;
 }

 66% {
 box-shadow: 0 0 0 10px #54d7ba, 0 0 0 12px white;
 }

 100% {
 box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
 }
}
@-o-keyframes fade {
 0% {
 box-shadow: 0 0 0 0 transparent;
 }

 66% {
 box-shadow: 0 0 0 10px #54d7ba, 0 0 0 12px white;
 }

 100% {
 box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
 }
}
@keyframes fade {
 0% {
 box-shadow: 0 0 0 0 transparent;
 }

 66% {
 box-shadow: 0 0 0 10px #54d7ba, 0 0 0 12px white;
 }

 100% {
 box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
 }
}
@-webkit-keyframes fade-in {
 0% {
 box-shadow: inset 0 0 0 0 transparent;
 }

 66% {
 box-shadow: inset 0 0 0 10px #54d7ba, inset 0 0 0 12px white;
 }

 100% {
 box-shadow: inset 0 0 0 20px transparent, inset 0 0 0 22px transparent;
 }
}
@-moz-keyframes fade-in {
 0% {
 box-shadow: inset 0 0 0 0 transparent;
 }

 66% {
 box-shadow: inset 0 0 0 10px #54d7ba, inset 0 0 0 12px white;
 }

 100% {
 box-shadow: inset 0 0 0 20px transparent, inset 0 0 0 22px transparent;
 }
}
@-o-keyframes fade-in {
 0% {
 box-shadow: inset 0 0 0 0 transparent;
 }

 66% {
 box-shadow: inset 0 0 0 10px #54d7ba, inset 0 0 0 12px white;
 }

 100% {
 box-shadow: inset 0 0 0 20px transparent, inset 0 0 0 22px transparent;
 }
}
@keyframes fade-in {
 0% {
 box-shadow: inset 0 0 0 0 transparent;
 }

 66% {
 box-shadow: inset 0 0 0 10px #54d7ba, inset 0 0 0 12px white;
 }

 100% {
 box-shadow: inset 0 0 0 20px transparent, inset 0 0 0 22px transparent;
 }
}
@-webkit-keyframes background {
 0% {
 background: transparent;
 }

 66% {
 background: white;
 }

 100% {
 background: white;
 }
}
@-moz-keyframes background {
 0% {
 background: transparent;
 }

 66% {
 background: white;
 }

 100% {
 background: white;
 }
}
@-o-keyframes background {
 0% {
 background: transparent;
 }

 66% {
 background: white;
 }

 100% {
 background: white;
 }
}
@keyframes background {
 0% {
 background: transparent;
 }

 66% {
 background: white;
 }

 100% {
 background: white;
 }
}
@-webkit-keyframes kiss-in {
 0% {
 -webkit-transform: scale(1);
 }

 66% {
 -webkit-transform: scale(0.9);
 }

 100% {
 -webkit-transform: scale(1);
 }
}
@-moz-keyframes kiss-in {
 0% {
 -moz-transform: scale(1);
 }

 66% {
 -moz-transform: scale(0.9);
 }

 100% {
 -moz-transform: scale(1);
 }
}
@-o-keyframes kiss-in {
 0% {
 -o-transform: scale(1);
 }

 66% {
 -o-transform: scale(0.9);
 }

 100% {
 -o-transform: scale(1);
 }
}
@keyframes kiss-in {
 0% {
 transform: scale(1);
 }

 66% {
 transform: scale(0.9);
 }

 100% {
 transform: scale(1);
 }
}
@-webkit-keyframes kiss-out {
 0% {
 -webkit-transform: scale(1);
 }

 66% {
 -webkit-transform: scale(1.1);
 }

 100% {
 -webkit-transform: scale(1);
 }
}
@-moz-keyframes kiss-out {
 0% {
 -moz-transform: scale(1);
 }

 66% {
 -moz-transform: scale(1.1);
 }

 100% {
 -moz-transform: scale(1);
 }
}
@-o-keyframes kiss-out {
 0% {
 -o-transform: scale(1);
 }

 66% {
 -o-transform: scale(1.1);
 }

 100% {
 -o-transform: scale(1);
 }
}
@keyframes kiss-out {
 0% {
 transform: scale(1);
 }

 66% {
 transform: scale(1.1);
 }

 100% {
 transform: scale(1);
 }
}
@-webkit-keyframes popping-border {
 0% {
 -webkit-transform: scale(1);
 }

 66% {
 -webkit-transform: scale(0.9);
 }

 100% {
 -webkit-transform: scale(1);
 box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25);
 }
}
@-moz-keyframes popping-border {
 0% {
 -moz-transform: scale(1);
 }

 66% {
 -moz-transform: scale(0.9);
 }

 100% {
 -moz-transform: scale(1);
 box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25);
 }
}
@-o-keyframes popping-border {
 0% {
 -o-transform: scale(1);
 }

 66% {
 -o-transform: scale(0.9);
 }

 100% {
 -o-transform: scale(1);
 box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25);
 }
}
@keyframes popping-border {
 0% {
 transform: scale(1);
 }

 66% {
 transform: scale(0.9);
 }

 100% {
 transform: scale(1);
 box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25);
 }
}