CSS Glowing form field on focus

 

Now a days most of the modern  website form field using glowing effect  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: Prepare HTML

Make a HTML form in your html page.

<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: Prepare CSS

Add CSS code into stylesheet 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;

 

You have Done!!!

DEMO

CSS Glowing form field on focus