Skip to content

Explore Amazing Buttons animation for your next project. 🤩An initiative by GDSC-DYPCOE for Hactoberfest. 🚀

License

Notifications You must be signed in to change notification settings

iamparas0/Animating-Buttons

 
 

Repository files navigation

Screenshot 2022-10-15 at 1 19 54 PM

✅ 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✨✨

Screenshot 2022-10-15 at 1 19 54 PM

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❗❗❗

    Back to top

Firstly

📢 Register here for Hacktoberfest and make 4️⃣ PRs this month to grab free SWAGS 🔥

  • Fork this repo here
  • Clone on your local machine
Screenshot 2022-10-15 at 1 19 54 PM

Welcome to Animating Buttons! Gif

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 〽️

Screenshot

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:

Back to top

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.

Back to top

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

CSS5 javascript HTML5

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 [email protected]: 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.

DON'T FORGET TO ⭐ THIS REPOSITORY !!

You can follow me here

Back to top

About

Explore Amazing Buttons animation for your next project. 🤩An initiative by GDSC-DYPCOE for Hactoberfest. 🚀

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 57.6%
  • JavaScript 22.5%
  • HTML 19.7%
  • SCSS 0.2%