CSS3 Input Border Blu-ray effect

1. Style styles

<style type= "Text/css" >. Demok3_input{transition:All 0.30s ease-in-out;-webkit-transition:All 0.30s ease-in-out;-moz-transition:All 0.30s ease-in-out;Border:#35a5e5 1px solid;Border-radius:3px;Outline:None;}. Demok3_input:focus{Box-shadow:0 0 5px Rgba (bayi, 203, 238, 1);-webkit-box-shadow:0 0 5px Rgba (bayi, 203, 238, 1);-moz-box-shadow:0 0 5px Rgba (bayi, 203, 238, 1);}. Demok3_a{text-decoration:None;-webkit-transition:All linear 0.30s;-moz-transition:All linear 0.30s;transition:All linear 0.30s;background:Rgba (Bayi, 203, 238, 1);Color: White;padding:6px 25px 6px 25px;Font:12px ' Microsoft Ya Black ';Border-radius:3px;}. Demok3_a:hover{background:Rgba (154, 187, 1);}</style>

2. html

<inputclass= "Demok3_input"type= "text"placeholder= "User name or email address"style= "height:25px"/><inputclass= "Demok3_input"type= "Password"placeholder= "Please enter password"style= "height:25px"/><aclass= "Demok3_a"href="#">Landing</a>

Demo Result:

CSS3 Input Border Blu-ray effect