/animated-search-bar

A modern, responsive, animated search bar built with HTML, CSS, and JavaScript. Expands on click and collapses when clicked outside — perfect for clean, interactive UI designs.

Primary LanguageCSS

🔍 Animated Search Bar

A modern, responsive, and animated search bar built with HTML, CSS, and JavaScript. This component expands when clicked and smoothly collapses when clicked outside. Inspired by clean UI patterns like GitHub and Material Design.

🚀 Features

  • ✅ Expand-on-click animation
  • ✅ Auto-collapse on outside click
  • ✅ Minimalist & responsive design
  • ✅ No frameworks — pure HTML/CSS/JS

📸 Preview

Animated Search Bar Demo

🧩 Technologies Used

  • HTML5
  • CSS3 (Transitions, Flexbox)
  • Vanilla JavaScript
  • Font Awesome Icons

💡 Usage

Clone or download this repo, then open index.html in your browser:

git clone https://github.com/your-username/animated-search-bar.git
cd animated-search-bar
open index.html