Glowing form field on focus

Image may be NSFW.
Clik here to view.
You may have seen glowing form fields on focus on many modern websites like twitter.com Form fields will glow when you focus on it. This can be done using CSS3 box-shadow and transition property.

Step 1:
Make a HTML form.

<form class="form">
<label>Name:</label> <input type="text" />
<label>Email:</label> <input type="email" />
<label>Password:</label> <input type="password" />
<input type="button" value="submit" />
</form>

Step 2:
Add CSS for form input fields.

.form input{
border: 1px solid #ddd;
outline: none;
border-radius: 4px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
	
.form input:focus {
border-color: #83b4db;
box-shadow: 0 0 10px #8fbfe6;
-moz-box-shadow: 0 0 10px #8fbfe6;
-webkit-box-shadow: 0 0 10px #8fbfe6;
}

Done!!!
Check demo