Menu

Twitter Like Textbox Glowing Effect Css3

CSS By Jan 08, 2013 No Comments

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>

 

Author

Hello i am Vivek Moyal PHP developer and writes tutorials for students and beginners. Love to explore new cities

No Comments

Leave a comment

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