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:
Creating HTML Document Structure:
  1. <form class="search" action="" method="get">
  2. <input type="text" class="text" name="" value="Search Here" onclick='value=""'/>
  3. <input type="submit" type="submit" value="" class="submit" name=""/>
  4. </form>
We have just created a form having an input box and submit button.
Preview:
Image1.JPG
CSS for HTML Document:
  1. .search {
  2. background: url(5.png);
  3. width: 320px;
  4. height: 32px;
  5. }
Here we set the background-image of form, height, and width(using class .search).
Preview:
image2.JPG
CSS
  1. .text {
  2. background: transparent;
  3. width: 290px;
  4. height: 32px;
  5. border: 0px;
  6. outline: 0px;
  7. padding: 10px;
  8. font-size: 15px;
  9. border-radius: 18px 0 0 20px;
  10. -webkit-border-radius: 18px 0 0 20px;
  11. -moz-border-radius: 18px 0 0 20px;
  12. -o-border-radius: 18px 0 0 20px;
  13. }
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:
image3.JPG
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
  1. .submit {
  2. background: transparent;
  3. border: 0px;
  4. height: 23px;
  5. cursor: pointer;
  6. border-radius: 100%;
  7. }
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.