📌 Enhanced Download Button

🔗 Live Demo: Enhanced Download Button

⭐ About

The Enhanced Download Button is a sleek, modern, and interactive button built for effortless file downloads with real-time tracking. It ensures a seamless experience with:

✅ Dynamic Download Counter – Tracks downloads in real time using an API.
✅ Smooth Animations & UI – Eye-catching gradient effects and hover states.
✅ Error Handling & Loading Indicator – Ensures reliability and a smooth user journey.
✅ Fully Responsive Design – Optimized for all screen sizes, from mobile to desktop.
✅ Fast & Secure Hosting – Deployed on Vercel for high performance and uptime.

Ideal for websites, SaaS tools, and file-sharing platforms looking to enhance their UX!

📂 Folder Structure

📂 download-button/         # Root directory
 ┣ 📂 public/               # Public folder for static files
 ┃  ┗ 📄 index.html         # Main HTML file with the download button
 ┣ 📄 LICENSE               # License file (GPL-3.0)
 ┣ 📄 README.md             # Documentation with setup & usage details
 ┣ 📄 vercel.json           # Vercel configuration file
 ┗ 📄 package.json          # Project metadata & scripts

🌟 Features & Functionalities

🎨 Modern UI & Animations

• Gradient hover effects for a smooth look.
• Loading animation when the file is downloading.
• Elegant shadow and hover transformations.

🔢 Real-time Download Counter

• Fetches current download count from an API.
• Increments download count upon each file download.
• Displays the counter in a styled badge.

🛑 Error Handling & Smooth User Experience

• If the download fails, the button shows an error message.
• Includes retry logic and resets automatically.

⚙️ Installation & Deployment

1️⃣ Clone the Repository

git clone https://github.com/AsifKamboh-COM/download-button.git
cd download-button

2️⃣ Install Dependencies (if needed)

Since this is a static HTML, CSS, and JS project, no dependencies are required.

3️⃣ Deploy on Vercel

Make sure you have Vercel CLI installed:

npm install -g vercel

Then deploy your project:

vercel

🌐 Your project will be live instantly!

💡 Usage Instructions

1️⃣ Open the webpage: Click Here
2️⃣ Click on the Download Button.
3️⃣ The spinner will appear while processing.
4️⃣ File starts downloading automatically.
5️⃣ Download counter updates dynamically.

📝 Customization

🎨 Change Button Styles

You can modify the styles in index.html inside the <style> section.

For example, change the gradient color:

:root {
    --primary-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffb400 50%, #ffeb3b 100%);
}

📥 Change Download Link

🔗 Modify the href inside the JavaScript code in index.html:

downloadLink.href = 'YOUR_FILE_DOWNLOAD_LINK_HERE';

📜 License

This project is licensed under GPL-3.0.
See the full license details in the LICENSE file.

👨‍💻 Author

Developed with ❤️ by Asif Kamboh 😎
Follow me for more amazing projects!

🏆 Contributing

🤝 Contributions are welcome!

1️⃣ Fork the repository
2️⃣ Make changes
3️⃣ Submit a pull request

👥 Let's build something amazing together!