Create Responsive Simple 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 Simple Search Button With HTML And CSS</h2> <div class="search-box"> <input type="text"placeholder="search" /> <img src="search.png" alt="" /> </div>
Step 3) Add to css :
.search-box{ max-width:500px; margin:auto; margin-top:32px; border:1px solid green; border-radius:30px; display:flex; align-items:center; background:linear-gradient(#bbb,rgba(255, 255, 255, 0)); } .search-box input{ width:90%; padding:7px 15px; border-radius:30px; border:0; outline:none; background:transparent; color:green; } ::placeholder{ color:green; } .search-box img{ width:20px; margin:5px 10px; }



Thank you sir

Congratulations to you on visiting our page.

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