Create Cool Search Button for Websites

Hello Guys. In this article, we will learn how to Create a Search button for websites.

Things require to create a 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 an 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 the background of the 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 the text box.

Preview:

In the next step, we do some work on the button. We have to make the 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.