How to Create a Search Button with CSS

Introduction

A search button allows users to submit their queries in a simple and visually appealing way. You can style a search button to fit your website's design by using CSS. In this tutorial, you'll learn how to create a basic search button using HTML and CSS, with a focus on customization and user interaction.

Problem Statement

Create a search button that:

Can be clicked to submit a search query.
Has a modern design, including hover effects and custom styling.

Example:

Input: A user enters a search query and clicks the search button.
Output: The search button submits the query.

Solution Steps

Create the Search Form Structure: Use HTML to define the search input field and the search button.
Style the Search Button with CSS: Customize the appearance of the button with colors, borders, and hover effects.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Button with CSS</title>
    <style>
        /* Step 1: Style the search form */
        .search-form {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 50px;
        }

        /* Step 2: Style the search input */
        .search-input {
            width: 250px;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #3498db;
            border-radius: 20px 0 0 20px;
            outline: none;
            box-sizing: border-box;
        }

        /* Step 3: Style the search button */
        .search-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: 2px solid #3498db;
            border-radius: 0 20px 20px 0;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-sizing: border-box;
        }

        /* Step 4: Hover effect for search button */
        .search-button:hover {
            background-color: #2980b9;
        }

        /* Optional: Responsive adjustments */
        @media (max-width: 600px) {
            .search-input {
                width: 180px;
            }

            .search-button {
                padding: 10px 15px;
            }
        }

    </style>
</head>
<body>

    <!-- Step 5: Create the search form with input and button -->
    <form class="search-form" action="/search" method="GET">
        <input type="text" class="search-input" placeholder="Search...">
        <button type="submit" class="search-button">&#128269;</button>
    </form>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

The .search-form class is used to create the layout of the search form. The display: flex property allows the input field and button to align horizontally. It is centered on the page with align-items: center and justify-content: center.

.search-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px; /* Adjusts the position from the top */
}

Step 2: Style the Search Input

The .search-input class styles the input field, giving it a width of 250px and rounded corners on the left. The border-radius: 20px 0 0 20px ensures only the left side of the input field is rounded, matching the button.

.search-input {
    width: 250px;
    padding: 10px; /* Space inside the input */
    font-size: 16px; /* Input font size */
    border: 2px solid #3498db; /* Border color */
    border-radius: 20px 0 0 20px; /* Rounded left side */
    outline: none; /* Removes blue outline on focus */
    box-sizing: border-box; /* Ensures padding is included in the total width */
}

box-sizing: border-box: Ensures padding and border are included in the element’s width.
border-radius: 20px 0 0 20px: Rounds only the left side of the input field.

Step 3: Style the Search Button

The .search-button class gives the button a background color (#3498db), white text, and rounded corners on the right side to match the input field. The button has a smooth hover effect for better user interaction.

.search-button {
    padding: 10px 20px; /* Padding for button size */
    font-size: 16px; /* Button text size */
    background-color: #3498db; /* Button background color */
    color: white; /* White text */
    border: 2px solid #3498db; /* Same border as the input */
    border-radius: 0 20px 20px 0; /* Rounded right side */
    cursor: pointer; /* Pointer cursor for buttons */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

background-color: #3498db: Sets the default button color.
border-radius: 0 20px 20px 0: Rounds only the right side of the button for symmetry with the input field.
cursor: pointer: Changes the cursor to a pointer when hovering over the button.

Step 4: Hover Effect

When the user hovers over the button, the background color changes to a darker shade (#2980b9). This is achieved with the :hover pseudo-class and a smooth transition using transition: background-color 0.3s ease.

.search-button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

Step 5: Responsive Design

For smaller screens, you can reduce the size of the input field and button padding using media queries. Here, the width of the input field is reduced to 180px and the button padding is also reduced.

@media (max-width: 600px) {
    .search-input {
        width: 180px; /* Smaller input field on mobile */
    }

    .search-button {
        padding: 10px 15px; /* Smaller button padding */
    }
}

Step 6: HTML Structure

The form consists of an input field and a button. The search icon is added to the button using a Unicode character (🔍), and the form submits via the action="/search" attribute when the user presses "Submit" or "Enter".

<form class="search-form" action="/search" method="GET">
    <input type="text" class="search-input" placeholder="Search...">
    <button type="submit" class="search-button">&#128269;</button>
</form>

action="/search": Specifies the action to be performed when the form is submitted (for example, sending the query to the search endpoint).
method="GET": Uses the GET method to submit the form data.

Customization

Change Button Style

You can easily customize the button's style by changing the background color, border, or shape:

.search-button {
    background-color: #e74c3c; /* Red button */
    border-radius: 10px; /* More rounded button */
}

Replace Search Icon with Font Awesome

You can use a Font Awesome search icon instead of the Unicode character by including the Font Awesome CDN and using the appropriate class:

<button type="submit" class="search-button">
    <i class="fas fa-search"></i>
</button>

To include Font Awesome:

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

Add Placeholder Text

You can update the placeholder text to guide the user in what to search for:

<input type="text" class="search-input" placeholder="Search for products, articles...">

Conclusion

Creating a search button with CSS is straightforward, and by using a combination of flexbox, styling properties like borders and padding, and hover effects, you can create an appealing and functional search form for your website. You can easily customize the appearance and behavior of the search button to match your design needs and make it more user-friendly.

Java Guides

Search This Blog