LAST UPDATED: AUGUST 5, 2021
How to create a search button with CSS?
The search button is added with the search field on a website. It is used to submit the query entered in the search box to the server. The search button can be created using CSS properties. We can also add search icons within the search buttons using an external icon library.
Creating a search button
The search button can be created using the <input> element with the type="submit". We can CSS such as background-color , padding, width to the search button.
Example: Creating a search button using CSS
Here, we have added a search box and search button and customized it using CSS properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 50%;
background: #CCCCCC;
text-align: center;
}
input[type=submit] {
background-color: #1252FF;
width: 100px;
font-size: 16px;
padding: 10px;
}
input[type=submit]:hover {
background: #0b7dda;
}
</style>
</head>
<body>
<h2> Search Button </h2>
<form action="/action_page.php">
<input id="search box" type="text" placeholder="Search here" name="search">
<input id="search btn" type="submit" value="search">
</form>
</body>
</html>
Output
Here is the output of the above program.
Example: Adding search icon to the search button
We can also add a search icon to the search button using Font Awesome icon library. Add the external link of Font Awesome library within the <head> tag.
Conclusion
In this tutorial, we have learned to customize the search button using CSS properties. We have also added a search icon using the Font Awesome library. It is easy to style the search button using CSS properties.
