Create Stylish Search Button for Website

• Download Searchbutton.zip - 5.9 KB

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