A modern, animated payment button using HTML, CSS, and JavaScript. This project provides a responsive and interactive payment button with smooth animations, including a processing state and a success checkmark. Ideal for integrating into payment systems or demo projects.
![preview](https://private-user-images.githubusercontent.com/121880462/367184788-0026ee74-b9d6-4fda-be9e-3cff1707a1c4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyMzM2ODcsIm5iZiI6MTczOTIzMzM4NywicGF0aCI6Ii8xMjE4ODA0NjIvMzY3MTg0Nzg4LTAwMjZlZTc0LWI5ZDYtNGZkYS1iZTllLTNjZmYxNzA3YTFjNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjExJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMVQwMDIzMDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MWUyNmNkZWJiYmVjY2I0MDBlZDk3ZDU1MjEzM2RhYjcwM2E1Y2Y0MDdhNTlhYWZlMmEyMTE5N2NkZTViYjlhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.3IN10twpShzTpD_NWB4cH0cV0Ym5_5dwk53Qcjrtud8)
- 🌟 Responsive Design: Adapts seamlessly to various screen sizes.
- 🕹️ Interactive Animation: Smooth hover effects, processing animation, and a confirmation checkmark.
- 💻 Customizable: Easy to modify colors, fonts, and styles via CSS.
- 📱 Mobile-Friendly: Adjusts for smaller devices with optimized font sizes.
- HTML5 for structuring the content.
- CSS3 for styling and animations.
- JavaScript for managing button states (processing and payment confirmation).
- Remixicon for the payment card icon.
- When the user clicks the button, it enters a "processing" state with a loading animation.
- After a short delay (simulated by JavaScript), the button changes to a "paid" state, displaying a checkmark to indicate successful payment.
- Font: Google Fonts - Poppins.
- Icons: Remixicon.
- CDN Icons Source: cdnjs Remixicon.
If you like this project, don't forget to give it a star ⭐️! Your support helps motivate further development and improvements.
Stay connected for more projects:
Thank you for your support!
You can discover more exciting projects on my GitHub.