Animated Search Box with CSS3

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

CSS3 Code

#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; }

HTML Form Code

<form method="get" id="searchform" action="http://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>

View Live Demo & Download

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks