Today I am going to tell you how to create Animated Search Box with CSS3 with various colors. You can simply copy the code and use it in your web projects immediately. Search Box with Animation effect is always nice to have in your webpage.
CSS3 Code to Animate Search Box
#searchform { float:left; margin-left:20px; margin:9px 0px 0px; padding:0px; }
#searchform fieldset { padding:0px; border:none; margin:0px; }
#searchform input[type="text"] {
background:#e8e8e8;
border:none;
float:left;
padding:0px 10px 0px 15px;
margin:0px;
width:150px;
height:38px;
line-height:38px;
transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
-moz-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
-webkit-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
-o-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
color:#585858;
}
#searchform input[type="text"]:hover, #searchform input[type="text"]:focus { width:200px; }
#searchform input[type="submit"] { background:url(icon-search.png) center 11px no-repeat; cursor:pointer; margin:0px; padding:0px; width:37px; height:38px; line-height:38px; }
input[type="submit"] { padding:4px 17px; color:#ffffcolor:#585858; ff; text-transform:uppercase; border:none; font-size:20px; background:url(gradient.png) bottom repeat-x; cursor:pointer; margin-top:10px; float:left; overflow:visible; transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; }
#searchform input[type="submit"]:hover { background-color:#333232; }
#searchform input[type='submit'] { background-color:#25ade4; }
Search Box HTML Code
<form method="get" id="searchform" action="https://w3lessons.info">
<fieldset>
<input id="s" name="s" type="text"
value="Enter Keyword" class="text_input"
onblur="if(this.value==''){this.value='Enter Keyword';}"
onfocus="if(this.value =='Enter Keyword') {this.value=''; }" />
<input name="submit" type="submit" value="" />
</fieldset>
</form>
Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedback are always welcome!
Thanks
