Create Cool Search Button for Websites

Hello Guys. In this article we will learn How to Create Search button for websites.

Things require to create Search button are:

• Basic Knowledge of HTML
• Basic Knowledge of CSS3
• an image(used as background image for form)

Creating HTML Document Structure:

<form class="search" action="" method="get">

<input type="text" class="text" name="" value="Search Here" onclick='value=""'/>

<input type="submit" type="submit" value="" class="submit" name=""/>

</form>

We have just created a form having input box and submit button.

Preview



CSS 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. We have to make background of it transparent and also set the height and width of it.

CSS
 

.submit

{

background:transparent;

border:0px;

height:23px;

cursor: pointer;

border-radius: 100%;

}

 
Here we set Background as transparent and Mouse icon as Pointer. Border-radius value equal to 100%(to make it circle in shape)

Preview



Using the same thing I have created another search button.

Preview



You can also download the source code.