How to create a search button with CSS?

In this article, we'll see how we can create a search button with CSS?
Submitted by Apurva Mathur, on July 27, 2022

Creating a search button is a simple job, as we just need one input box and button which will fetch the value. Fetching the value through the ID from the database is not our focus.

First, let us all see the code, and then we'll see the explanation of the code:

HTML and CSS code to create a search button

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <style>
         * {
         box-sizing: border-box;
         }
         input[type=text] {
         padding: 12px;
         font-size: 17px;
         border: 1px solid grey;
         float: left;
         background: lightblue;
         border-radius: 15px;
         }
         button {
         float: left;
         width: 20%;
         padding: 12px;
         background: olivedrab;
         color: white;
         font-size: 17px;
         border: 1px solid grey;
         border-left: none;
         cursor: pointer;
         border-radius: 15px;
         }
      </style>
   </head>
   <body>
      <h3>Search button with 80% width</h3>
      <form >
         <input type="text" placeholder="Search.." name="search" style=" width: 80%;">
         <button type="submit"><i class="fa fa-search"></i>Search here</button>
         <h3>Search button with 50% width</h3>
         <input type="text" placeholder="Search.." name="search" style=" width: 50%;">
         <button type="submit"><i class="fa fa-search"></i>Search here</button>
      </form>
   </body>
</html>

Output:

Example 1: Place text blocks over an image

Explanation:

Let us first understand the HTML code, whenever you want to create a search button the foremost step is to take an input type = text, now the question arises why input type=text why not something else? So, the answer to this question is straightforward as in the search bar we will write something for that it will be important to have, a text input type of that bar. After this just place, a button tag as this button will help us to fetch the data.

After finishing the HTML code, we'll now understand the CSS code, I've started the CSS code by giving little styling to the input tag. (To style any input tag input[type=text], we'll use this syntax here type is text if you are designing something else then in that case you'll write the specific type). If you'll observe the code closely you'll realize no such hard styling is done here, basic margin padding, border, the, etc property which obviously will differ from one's perspective. Same basic properties are applied to the button tag as well, you can always change the design as per your creativity, and the important factor over here is to provide appropriate width so that the input box and search button align in a line. One thing that is special over here is the use of search icons and for that, I have used font awesome CDN.

Let us see how we can use icons on a webpage?

There are many websites that provide us with free icons, and one of them is font awesome. The website provides us with many icons from which some of which are free and some of them are paid icons. You can easily find any icon, you just need to write the keyword related to the icon you want and you'll get the icon.

Step 1: For this, the first step is to import the CDN of font awesome which is:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

Copy this style sheet link, under head tag.

Step 2: After copying the CDN, in your code go to https://fontawesome.com/icons/location-pin?s=solid, this link, and type the icon name you want to use on your web page.

Step 3: Click on the icon and copy the code shown in the picture.

Example 2: Place text blocks over an image

Step 4: Copy this code, wherever you want to use your icon.
As we know how we can import the icon on our webpage, now we’ll use these icons in the button.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.