CSS3 could not get here any faster. Lately, there has been a lot of post about CSS3. It’s wonderful features are too good not to use. Only folks at Microsoft do not seem to have the grasp of that concept. They could have supported CSS3 for Internet Explorer 8. However, that is another discussion. In this post, we are using some CSS3 properties to create buttons and forms and show you how to enhance user experience.

Live Demo |CSS3 Buttons Download

Here is the HTML structure first.

 <p>
<input id="searchbox" class="searchfield" type="text" name="q" size="19" value="Type Keywords..." onfocus="if (this.value == 'Type Keywords...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Type Keywords...';}" name="s" id="s" />
<input  type="submit" value="Search" class="searchbutton" />
</p>

We added a little javascript onfoucs and onblur to give user hint . The rest simple HTML.  Now the CSS.

.searchfield{
border:1px solid #000;
 width:200px;
height:2.5em;
padding-bottom:3px;
}
input:focus.searchfield {border-color:#c8d9f2;}
 .searchbutton{
position:relative;
top:-1px;
font-size:14px;
height:2.5em;
vertical-align:top;
white-space:nowrap;
cursor:pointer;
overflow:visible;
border:1px solid #ccc;
background:#f6f6f6;
background-image:-moz-linear-gradient(top,#ffffff,#efefef); // CSS3  background property
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
// Internet Explorer Gradient Filter http://bit.ly/bVJJP1
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; // CSS3 rounded conrners
}

A little explanation about the CSS. For the background we are using CSS3 gradient property for both Gecko (Firefox) and Webkit (Safari, Chrome) browser. You have define your gradient a little differently for each  browser.

So, what about Internet Explorer? By default it does not support rounded corner. However you can use gradient filter for IE. The gradient color rendering in IE7 or IE8 is very ugly. -ms-filter is for Microsoft vendor extension. Read more about here. The result should look like this

Further Reading:

• -moz-linear-gradient
• Safari CSS Visual Effects Guide: Gradients

Now, you can get creative with it. You can also define the active state of the button  using the :active property.

/*-------------- Button Style 2 -------------*/
		.searchfield_a{border:1px solid #ddd; width:200px; height:2.0em; padding-bottom:4px; color:#999; font-size:14px;}
		.searchbutton_a{color :#666;background :#def9ff; background :-moz-linear-gradient(top,#def9ff,#cbe4ec);background-image : -webkit-gradient(linear, left top, left bottom, from(#def9ff), to(#cbe4ec));filter :progid :DXImageTransform.Microsoft.Gradient(startColorStr=#def9ff),endColorStr=#cbe4ec);-ms-filter :"progid :DXImageTransform.Microsoft.Gradient(startColorStr=#def9ff, endColorStr=#cbe4ec)"; border :1px solid #c0d7e1;border-radius :3px;-moz-border-radius :3px;-webkit-border-radius :3px;cursor :pointer;font-family :"Myriad Pro", Gerogia, serif;font-size :14px;font-weight :800;height :2.5em;overflow :visible;padding :0.5em 0.6em;text-transform :uppercase;vertical-align :top; white-space :nowrap;}
	.searchbutton_a:hover{cursor:pointer;border-color:#b9cfdb;outline:0;-moz-box-shadow:0 0 3px #aec3ce;-webkit-box-shadow:0 0 3px #aec3ce;box-shadow:0 0 3px #aec3ce;}
			/*-------------- Button Style 3 -------------*/
		.searchfield_b{border:1px solid #ddd; width:200px; height:2.0em; padding-bottom:4px; color:#999; font-size:14px;}
	   .searchbutton_b{color :#f2f2f2;background :#ff718a;background-image : -webkit-gradient(linear, left top, left bottom, from(#ff718a), to(#f98a7f));background-image :-moz-linear-gradient(top,#ff718a,#f98a7f); filter :progid :DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
-ms-filter :"progid :DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";border :1px solid #c97168;border-radius :3px;-moz-border-radius :3px;-webkit-border-radius :3px;cursor :pointer;font-family :"Myriad Pro", Gerogia, serif;font-size :14px;font-weight :800;height :2.5em;overflow :visible;padding :0.5em 0.6em;text-transform :uppercase; vertical-align :top; white-space :nowrap;
}
		.searchbutton_b:hover{cursor:pointer;border-color:#d2766d;outline:0;-moz-box-shadow:0 0 5px #fb9196;-webkit-box-shadow:0 0 5px #fb9196;box-shadow:0 0 5px #fb9196;}
	input:focus.searchfield_a,input:focus.searchfield_b {border-color:#bbb;}

We have also added a simple contact from that was created using CSS3. If there any question or suggestion please let us know in the comment.