Simple Input-text

by Ashish Mishra

HTML

<input type='email' placeholder='Your Email'/>

CSS

body{
    width:100%;height:100%;left:0px;top:0px;position:absolute;
    background:url('http://funlava.com/wp-content/uploads/2013/03/cool-wooden-wall-cool-twitter-backgrounds.jpg') no-repeat ; overflow:hidden;
}
input[type=email] { 
color:#fff;
padding:0px 8px 0px 8px;
box-sizing:border-box;

border:2px dotted #11D0ED;
height:25px;
width:200px;
background:transparent;
outline:none;
position:absolute;
margin:-12.5px 0 0 -100px;
top:50%;left:50%;
transition:all 400ms ease-in-out;    
}

input[type=email]:focus{
text-shadow:0px 0px 1px #fff;
box-shadow:0px 0px 10px 1px red,0px 0px 2px 0.5px red;
border:none;
background:rgba(0,0,0,0.4);
 -webkit-transform:scale(1.1);
}