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.