Open In App

How to create gradient search button using HTML and CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to create a gradient search button using HTML & CSS, along with knowing its basic implementation through the examples. The creation of a gradient search button involves the CSS linear-gradient() function, which sets the background color of the button. Here, we have designed the button with rounded edges, and a hover effect is implemented to enhance the user experience.

Approach: In this approach, we will create the Basic Search Bar with a Button. Here, we have the form element that is selected and styled with a display flex and center alignment for its child elements. A margin of 20px is also applied to the form. The input element is styled with 10px of padding and a 25px border-radius. The border is removed, and a margin of 10px is applied to the right side. The font size is set to 16px. The button element is styled with Custom Properties declared using . These properties are later used to define the background color, shadow, padding, font size, and cursor. The button element is then styled with a background color, text color, border, padding, border radius, font size, cursor, and the transition duration. Linear gradient background is applied using the custom properties. A box shadow is also applied to the button. A hover effect is applied to the button element that changes the background color, and linear gradient, and adds a slight translateY and box-shadow effect.

Example 1: This example describes a basic gradient search button using HTML & CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        form {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
        }
  
        input {
            padding: 10px;
            border-radius: 25px;
            border: none;
            margin-right: 10px;
            font-size: 16px;
        }
  
        button {
            --primary-color: #a800ff;
            --secondary-color: #ffbf00;
            --shadow-color: rgba(255, 255, 255, 0.5);
            --transition-duration: 0.3s;
            --button-border-radius: 25px;
            --button-padding: 10px 20px;
            --button-font-size: 16px;
            --button-cursor: pointer;
  
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: var(--button-padding);
            border-radius: var(--button-border-radius);
            font-size: var(--button-font-size);
            cursor: var(--button-cursor);
            transition: 
                background-color var(--transition-duration) ease-in-out;
            background-image: 
                linear-gradient(to right, var(--primary-color), 
                                          var(--secondary-color));
            box-shadow: 0px 2px 10px var(--shadow-color);
        }
  
        button:hover {
            background-color: var(--secondary-color);
            background-image: 
                linear-gradient(to right, var(--secondary-color), 
                                          var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0px 2px 10px var(--shadow-color);
        }
    </style>
</head>
  
<body>
    <h1 style="color: lightgreen;">
      GeeksForGeeks
      </h1>
    <form>
        <input type="text" 
               placeholder="Search...">
        <button class="gradient-search-button" 
                type="submit">
                Search
        </button>
    </form>
</body>
  
</html>


Output:

Basic search bar with gradient search button

Approach 2:  In this approach, we will create the Gradient Search Button as Link. Here, we have defined a hyperlink with the class name “gradient-search-button”. The hyperlink text is “Click to Search” and the href attribute is set to “#”. Custom CSS variables are defined using the syntax to set the primary color, secondary color, shadow color, transition duration, button border-radius, button padding, button font size, and button cursor.  The display property is set to inline-block to ensure that the tag is displayed as a block element, allowing it to be styled using CSS. The cursor property is set to the value of the button cursor variable to indicate to the user that the hyperlink is clickable. The transition property is set to change the background-color property with a duration of the value of the transition duration variable, and with an ease-in-out timing function. The background-image property is set to a linear gradient that starts from the primary color and ends at the secondary color, creating a gradient effect for the background. The :hover pseudo-class is used to apply styles to the hyperlink when the user hovers over it.

Example 2: This is another basic example that describes the gradient search button using HTML & CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        a {
            --primary-color: #ff38ac;
            --secondary-color: #0de7e4;
            --shadow-color: rgba(255, 255, 255, 0.5);
            --transition-duration: 0.3s;
            --button-border-radius: 25px;
            --button-padding: 10px 20px;
            --button-font-size: 16px;
            --button-cursor: pointer;
  
            display: inline-block;
            background-color: var(--primary-color);
            color: black;
            border: none;
            padding: var(--button-padding);
            border-radius: var(--button-border-radius);
            font-size: var(--button-font-size);
            cursor: var(--button-cursor);
            transition: 
                background-color var(--transition-duration) ease-in-out;
            background-image: 
                linear-gradient(to right, var(--primary-color), 
                                          var(--secondary-color));
            box-shadow: 0px 2px 10px var(--shadow-color);
            text-decoration: none;
        }
  
        a:hover {
            background-color: var(--secondary-color);
            background-image: 
                linear-gradient(to right, var(--secondary-color), 
                                          var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0px 2px 10px var(--shadow-color);
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <a href="#" 
       class="gradient-search-button">
       Click to Search
    </a>
</body>
  
</html>


Output:

 



Last Updated : 10 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads