search bar i

how to create a search bar with a search button

Adding a search bar to your website actually makes it easy to extract information easily from the website, though there is traditional way of creating a search bar which involves creating the search box or an input type of search and then creating a button. This was the basic method, however, there might be times where you may have little or no space for a button, and then you can resolve to create the search button inside the search bar.

code to create a search bar with a search button.

HTML

<section id=”search-section”>

<div class=”container-fluid”>

<h3 class=”text-center “>Search Here</h3>

<div>

<div>

<div>

<form>

<input type=”text” />

<button>Search</button>

</form>

</div>

</div>

</div>

</div>

</section>

CSS

#search-section {

  width: 100%;

}

h3 {

  margin-left: 10%;

  margin-bottom: 2%;

  color: white;

}

#search-section form {

  border: 1px solid black;

  width: 80%;

  margin: 0 auto;

  padding-bottom: 55px;

  padding-left: 10px;

  border-radius: 5px;

  background-color: white;

  height: 50px;

  position: relative;

}

.form-container {

  width: 100%;

}

#search-section input[type=”text”] {

  color: blue;

  width: 80%;

  height: 50px;

  border: none;

  outline: none;

  font-size: 18px;

}

#search-section button {

  position: absolute;

  margin: 20px;

  margin-left: 0;

  outline: none;

  border: none;

  padding: 8px;

  border-radius: 8px;

  color: white;

  /* font-weight: bold; */

  transition: all 1s linear;

}

#search-section button:hover {

  background-color: rgb(235, 229, 229);

  color: green;

  border: 1px solid gray;

}

The code above can be used to create a responsive search bar with the button inside as shown below,

search bar with button

 Your preference might change but on one or more occasion you may likely need something like this, and just to add more spices to our work, we can decide to change the button text to an icon, a search icon to be precise.

So we are going to change our HTML code to the following

<section id=”search-section”>

<div class=”container-fluid”>

<h3 class=”text-center pt-4″>Search Here</h3>

<div class=”form-container”>

<form>

<input type=”text” />

<!– here you need to add fontawesome code –>

<button><i class=”fa fa-search find”></i></button>

</form>

</div>

</div>

</section>

And we just need to add the following CSS to current CSS code

#search-section button .find {

background-color: transparent;

color: aqua;

font-size: 18px;

}

#search-section button .find:hover {

background-color: rgb(235, 229, 229);

color: green;

border: 1px solid gray;

}

search bar with icon

And hopefully we have something interesting as seen above

Leave a Comment

Your email address will not be published. Required fields are marked *