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

Image1.JPG

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:

image2.JPG

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

image3.JPG

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

image4.JPG

Using the same thing I have created another search button.

Preview

image5.jpg

You can also download the source code.

Next Recommended Reading
How To Create A CSS Button In HTML