✅ Animation Buttons
Welcome to the Animating Buttons repository! 🎉
This project aims to provide a collection of animated buttons that you can use to enhance your web development projects. Whether you're a beginner or an experienced developer, these buttons will add a touch of interactivity and flair to your websites.
✨✨HacktoberFest 2022✨✨
What can You Contribute ⚠️
-
You can contribute any animated buttons. 🤩
-
You can update or refine an existing animated button or even add your own new buttons in this repo. 🚀
-
Make sure you follow the below steps before making your contributions❗❗❗
Firstly
📢 Register here for Hacktoberfest and make 4️⃣ PRs this month to grab free SWAGS 🔥
- Fork this repo here
- Clone on your local machine
Welcome to Animating Buttons! 
Coolest place in the digital universe, the Animating Buttons repository! This project aims to provide a collection of animated buttons that you can use to enhance your web development projects. Whether you're a beginner or an experienced developer, these buttons will add a touch of interactivity and flair to your websites.
GSSoC 2023 〽️
What can You Contribute ⚠️
| Contribution Guidelines | |
|---|---|
| - You can contribute any animated buttons. ⬆️ | |
| - You can update or refine an existing animated button or even add your own new buttons to this repository. 🚀 | |
| - Make sure you follow the below steps before making your contributions. ❗❗❗ |
Contribution Steps:
〽️ First, fork the repository (Click the Fork button in the top right corner of the page).
〽️ Clone the forked repo to your local machine using the following command:
git clone https://github.com/**username**/Animating-Buttons.git
- Navigate to project directory.
〽️ Navigate to project directory.
cd Animating-Buttons
npm i
npm start
- Create a new Branch
〽️ Create a new Branch
git checkout -b my-new-branch
🚀🚀 Go to public/Buttons folder and add a new folder with your GitHub username including your button code (index.html + style.css files)
🚀🚀 Animating Buttons Repository Instructions
To contribute to the Animating Buttons repository, follow these steps:
Note:
-
Make sure to align your button centered horizontally as well as vertically.
-
Don't forget to replace 'your_github_username' with GitHub Username.
-
If you are adding more than one buttons then give proper names such as Spyware007_1,Spyware007_2, your_github_username_1,etc
-
Stage your changes.
git add .
- Commit your changes.
| Step | Description | Link |
|---|---|---|
| 1 | Go to the public/Buttons folder in the repository. | public/Buttons |
| 2 | Add a new folder with your GitHub username, including your button code (index.html + style.css files). | - |
| 3 | Go to the src/Data.js file. | src/Data.js |
| 4 | Add your folder name (e.g., github_username) and your code in the src/Data.js file. |
- |
Note: Replace github_username with your actual GitHub username.
| Note |
|---|
| Make sure to align your button centered horizontally as well as vertically. |
| Don't forget to replace 'your_github_username' with your actual GitHub username. |
| If you are adding more than one button, give them proper names like Spyware007_1, Spyware007_2, your_github_username_1, etc. |
〽️ Stage your changes.
git add .
〽️ Commit your changes.
git commit -m "Relevant message"
- Then push
git push origin my-new-branch
- Finally, create a new pull request from your forked repository
PLEASE NOTE
- Make sure you commit your changes in a new branch❗❗
- Make sure that your file name and your commit message are relevant.
- Also, make sure you comment your code wherever necessary.
Our Beloved Contributors 😍
〽️ Then push
git push origin my-new-branch
〽️ Finally, create a new pull request from your forked repository
| Note |
|---|
| Make sure you commit your changes in a new branch ❗❗ |
| Make sure that your file name and your commit message are relevant. |
| Also, make sure you comment your code wherever necessary. |
Tech Stack Used
Our Beloved Contributors ⭐
##A special note for a particular issue some users can face in the project##
Upon initializing , the following message may be prompted on the terminal. 'react-scripts' is not recognized as an internal or external command, operable program or batch file. To eliminate that: You can use to acquire the missing dependencies.
But during npm install, the following error can occur: npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
The warning message received indicates that the package 'stable' you have installed is deprecated. The 'stable' package was previously used to provide a stable sorting algorithm for older versions of JavaScript that did not guarantee the stability of the Array#sort() method. However, modern versions of JavaScript now ensure that Array#sort() is a stable sort, making the 'stable' package unnecessary.
The warning message suggests referring to the compatibility table on MDN (Mozilla Developer Network) to understand the browser compatibility of the Array#sort() method. The table provides information about which browser versions support stable sorting using Array#sort().
To address this issue: we can simply use the command:
After this when we again run the command: , the website will work just fine.
A big thank you to all our contributors who have made this project better with their valuable contributions! We appreciate your efforts and dedication.
Don't forget to ⭐ this repository to show your support!
PS: A big thank you to all our contributors who have made this project better with their valuable contributions! We appreciate your efforts and dedication.