Create Search Button Using HTML And CSS

Its features:

  • It is completely responsive.

  • Here the maximum width of the search box is 500px.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :


Step 1) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1">
Step 2) Add to html :
<h2>Create Responsive Header Navbar With HTML And CSS</h2> <form class="example" action="/action_page.php" style="margin:auto;max-width:500px"> <input type="text" placeholder="Search.." name="search2"> <button type="submit"><i class="fa fa-search"></i></button> </form>
Step 3) Add to css :
form.example input[type=text] { padding: 10px; font-size: 17px; border:1px solid red; float: left; width: 80%; background-image: linear-gradient(#bbb, #ddd, #bbb); } form.example button { float: left; width: 20%; padding: 10px; background-image: linear-gradient(#c00404, #f7012f, #c00404); color: white; font-size: 17px; border:1px solid red; border-left: none; cursor: pointer; } form.example button:hover { background-image: linear-gradient(#0018f1, #2998ec, #0018f1); } form.example::after { content: ""; clear: both; display: table; }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.