This repository contains code for creating an animated search bar using HTML and CSS. The search bar expands and contracts smoothly to enhance user experience .
- Smooth animation effects
- Responsive design
- Customizable styles
To use this animated search bar in your project, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/withaarzoo/Animated-Searchbar.git- Include the
style.cssfile in your HTML file:
<link rel="stylesheet" href="style.css">- Copy the HTML code for the search bar from
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Animated Search Bar</title>
</head>
<body>
<div class="search">
<input type="text" placeholder="Search.." required>
</div>
</body>
</html>- Customize the styles in
style.cssto match your project's design if needed.
You can customize various aspects of the search bar, such as colors, font, and size, by modifying the CSS variables in the style.css file.
This project uses the Google Fonts API to import the "Poppins" font for styling the search bar.
This project is licensed under the MIT License.
- Font: Google Fonts - Poppins
Feel free to contribute to this project by creating pull requests or reporting issues. If you find this project helpful, don't forget to star it on GitHub! 🌟