-
Animated cool Search bar
HTML
CSS
JavaScript
<div class="search-box"> <input type="text" placeholder="Search..."> <button type="submit">🔍</button> </div>
body { background-color: #ccc; margin: 20%; } .search-box { width: 50px; height: 50px; background: #fff; border-radius: 25px; display: flex; align-items: center; transition: width 0.4s ease-in-out; overflow: hidden; border: 2px solid #333; } .search-box:focus-within { width: 300px; } .search-box input { width: 100%; border: none; outline: none; background: none; padding: 0 15px; font-size: 16px; display: none; } .search-box:focus-within input { display: block; } .search-box button { background: none; border: none; cursor: pointer; font-size: 20px; padding: 0 15px; }
Live Preview
- Animated cool Search bar