How to create: Search button
- Previous Page Animation Search
- Next Page Full-screen Search
Learn how to use CSS to create a search button.
Full width:
Centered within the form with the maximum width:
How to create a search button
First step - Add HTML:
<!-- Load icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Form --> <form class="example" action="action_page.php"> <input type="text" placeholder="Search.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> </form>
Second step - Add CSS:
* { box-sizing: border-box; {} /* Set the style of the search field */ form.example input[type=text] { padding: 10px; font-size: 17px; border: 1px solid grey; float: left; width: 80%; background: #f1f1f1; {} /* Set the style of the submit button */ form.example button { float: left; width: 20%; padding: 10px; background: #2196F3; color: white; font-size: 17px; border: 1px solid grey; border-left: none; /* Prevent double border */ cursor: pointer; {} form.example button:hover { background: #0b7dda; {} /* Clear float */ form.example::after { content: ""; clear: both; display: table; {}
- Previous Page Animation Search
- Next Page Full-screen Search