Twitter Like Textbox Glowing Effect Css3

By | January 8, 2013

Textfield Glow Effect

Here is the tutorial for the Textbox glow or Adding glowing border to Textbox, div etc. These are twitter like Textbox. It was firstly used by the twitter but now it is used all over the world. Below is the code for you

Glowing effect in Css3

When you click over the Textbox borders of Textbox will glow out.


below is the code for it

How to create Twitter like Textbox Glow

There is no any Jquery is used it is only simple Html and Css3.

<style type="text/css">
input[type=text]{border: 1px solid #c7c7c7;height:30px;width: 250px; -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;outline-color: #a71b1f;-webkit-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    -moz-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    -ms-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    -o-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;}
input[type=text]:focus {box-shadow: 0 0 7px #78C2FF;outline: none;}
    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *