Create Cool Search Button for Websites

Creating stylish search button-step by step using HTML and CSS.

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.