Pinterest Like Glowing Input Fields with CSS3

In this tutorial, we will create a Pinterest Like login form that adds a glowing effect to the boder of input field on focus. It built only with CSS3 box-shadow property, no jquery, no any other script. Please note that this effect is only compatible with modern browsers which support CSS3 box-shadow property. For old browsers, it just changes the color of the border when on focus. 

How to use it:

1. The CSS

.formwrap {
display: block;
margin-bottom: 9px;
}
.formwrap label {
display: inline-block;
width: 80px;
font-size: 1.1em;
font-weight: bold;
color: #444;
font-family: Arial, Tahoma, sans-serif;
}
.formwrap .shadowfield {
position: relative;
width: 250px;
font-size: 17px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px 12px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
.formwrap .shadowfield:focus {
border-color: #930;
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}

2. Markup

<div class="formwrap">
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="" class="shadowfield">
</div>
<div class="formwrap">
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="" class="shadowfield">
</div>

3. Done

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.