Hello Guys. I am again back with a trick How to Create a Stylish Search Button.
Let's Start
Step 1: Creating HTML Document
<form class="search" action="" method="get">
<input type="text" class="text" name="q" value="Search Here"
onclick='value=""'/>
<input type="submit" type="submit" value="" class="submit"
name="q"/>
</form>
We have just created a form having input box and submit button.
Preview:

Step 2: Creating Stylesheet/Style for HTML Document
.search
{
background: url(5.png);
width:320px;
height:32px;
}
Here we set the background-image of form, height and width(using class .search).
Preview:

CSS
.text
{
background:transparent;
width:290px;
height:32px;
border:0px;
outline:0px;
padding:10px;
font-size:15px;
border-radius:18px 0 0 20px;
-webkit-border-radius: 18px 0 0 20px;
-moz-border-radius: 18px 0 0 20px;
-o-border-radius: 18px 0 0 20px;
}
Now we set background of text box as transparent, set width and height of text box. Set Outline as 0 px so that no Outline is showed on clicking the text box.
We use border-radius to make round corners of text box.
Preview:

In next step we do some work on button.
CSS:
.submit
{
background:transparent;
border:0px;
height:23px;
cursor: pointer;
border-radius: 100%;
}
Here we set Background as transparent and Mouse icon as Pointer
Preview:

That's All.
Hope you like it. Thank You .
Please View my Other Tips/Tricks:-
Create Smart and Stylish Button
Create Smart and Stylish Tooltip