Le bouton de recherche est ajouté au champ de recherche d'un site Web. Il est utilisé pour soumettre au serveur la requête saisie dans le champ de recherche. Le bouton de recherche peut être créé à l'aide de propriétés CSS. Il est également d'ajouter des icônes de recherche dans les boutons de recherche en utilisant une bibliothèque d'icônes externe.
Le bouton de recherche peut être créé en utilisant une balise <input> avec l'attribut type="submit".
Il est possible appliquer des propriétés CSS tels que background-color, padding, width au bouton de recherche.
Dans cet exemple, nous avons ajouté une barre de recherche et un bouton de recherche et les avons personnalisés à l'aide de propriétés CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 50%;
background: #CCCCCC;
text-align: center;
}
input[type=submit] {
background-color: #1252FF;
width: 100px;
font-size: 16px;
padding: 10px;
}
input[type=submit]:hover {
background: #0b7dda;
}
</style>
</head>
<body>
<h2> Search Button </h2>
<form action="/action_page.php">
<input id="search box" type="text" placeholder="Search here" name="search">
<input id="search btn" type="submit" value="search">
</form>
</body>
</html>
Résultat
Voici le résultat du code ci-dessus.
Nous pouvons également ajouter une icône de recherche au bouton de recherche en utilisant la bibliothèque d'icônes Font Awesome. Ajoutez le lien externe de la bibliothèque Font Awesome dans la balise <head>.
Dans ce tutoriel, nous avons appris à personnaliser un bouton de recherche à l'aide des propriétés CSS. Nous avons également ajouté une icône de recherche à notre bouton de recherche à l'aide de la bibliothèque Font Awesome. Vous avez pu voir qu'il est plutôt facile d'ajouter du style à un bouton de recherche à l'aide des propriétés CSS.
