How to create gradient search button using HTML and CSS ?
Last Updated : 10 Mar, 2023
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 buttonApproach 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:
.gif)
Similar Reads
How to create linear gradient text using HTML and CSS ?
The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide
3 min read
How to create a shinny button using HTML and CSS ?
Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c
3 min read
How to Create Custom Radio Button using HTML and CSS ?
The simple radio button can be customized using HTML and CSS easily. We will use some CSS properties to create a custom radio button. The :after pseudo-element and checked attribute is used to set some CSS property. The complete code is divided into two sections, the first section contains the HTML
3 min read
How to Create Neon Light Button using HTML and CSS?
The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc
2 min read
How to create linear gradient background using CSS ?
In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio
4 min read
How to Create a Gradient Shadow using CSS ?
A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e
2 min read
How to Create a Transparent Button using HTML and CSS?
Transparent buttons are a popular design choice in modern web development, as they create a sleek and minimalist look. By using CSS, you can easily create buttons with fully transparent or semi-transparent backgrounds. This article uses the background-color: transparent; property to design the trans
2 min read
How to Create an Animated Search Box using HTML and CSS ?
The task is to create an Animated Search Box using HTML and CSS. The search bar is one of the most important components of the website. Basically, it is used for connecting people with websites. In the face of complicated web content, users express their needs by searching keywords, expecting to obt
2 min read
How to Create Text Reveal Effect for Buttons using HTML and CSS ?
Buttons are the most important user interface component for any website. It is very important to design the buttons in a creatively unique way. The text-reveal effect for a button is used when it is used to reveal some offer or exciting content for enhancing the user experience. Approach: The approa
2 min read
Create a Button Group using HTML and CSS
This article will show you how to create a Button Group with the help of HTML and CSS. To create the Button Group, first, we create buttons using the HTML <button> element and then apply some CSS styles to make all buttons in a group. First, we create a div container with the class name .butto
2 min read