spyware007 / animating-buttons Goto Github PK

View Code? Open in Web Editor NEW

235.0 3.0 456.0 20.62 MB

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

Home Page: https://buttons-animhub.onrender.com/

License: MIT License

HTML 3.15% CSS 33.06% JavaScript 63.79%

css hacktoberfest hacktoberfest-accepted html animation-css javascript reactjs animated animation button

animating-buttons's Introduction

OM GAWANDE

🥇 Open Source Projects open for contributions.

💻 Projects	🌟 Stars	🍴 Forks	🐛 Issues	🔔 Pull Requests	👨‍💻 Language
🚀 Animating Buttons

🌟 STAR THE REPOS IF YOU LIKE 🌟

About Me

I am Om Gawande, currently in 3rd year pursuing my Computer Engineering journey from D.Y. Patil College Of Engineering, Akurdi, Pune.
I love competitive programming. I am a 3-star⭐️ coder at Codechef.
Full Stack Developer!
Not like the rest of them
Who doesn’t love a totally strange message from a stranger about something completely random? Just drop a Hi 👋 here !

Let's Connect

Web Tech Stack

Languages

Databases

Hosting

UI/UX

My recent GitHub activity ⚡️

🎉 Merged PR #46 in Pixel-Perfect-Tales/AnimHub
💪 Opened PR #46 in Pixel-Perfect-Tales/AnimHub
🎉 Merged PR #2050 in Spyware007/Animating-Buttons
🎉 Merged PR #2049 in Spyware007/Animating-Buttons
🎉 Merged PR #2048 in Spyware007/Animating-Buttons

My Latest Blog Posts 👇

How did I become a GDSC WEB Specialist(Lead)? 🚀

30 Aug 2022

Let's start. 🚀 It all started with the name SPIDER. 🕸 I like when people call me by that name.

Backstory. 🔙 At first, I didn't have any idea what I was doing after I bought a MacBook Air ( except showoff ). Later I figured out about Competitive P...

Flipverse - The Journey of Flipkart Grid Challenge 🚀

28 Aug 2022

It was just a normal day when I got a message from Dhruv Kothari on Super 30 (our small community) of Web Dev saying "Guys team banao and aag lagao 🔥" with a registration link for Flipkart Grid 4.0 Hackathon. I didn't have any such motivation to par...

if (isAwesome) {
  // thanks in advance :p
  starThisRepository();
}

Leave a ⭐ from here if you like 😁

I tweet sometimes

animating-buttons's People

Contributors

Stargazers

Watchers

Forkers

123shuklaayush sapna127 sushantgwr87 saifxyzyz mufzaal ayushi8989 sakshy18 aaditya1612 25vaishnavibarge17 sohamvadje shindenikhil659 abhishekthecoder00 pratham280 aashvikothari gauribhand023 sks8784 bhushan8177 saurabhbarde-007 jatayu-u killerraj369 iam-sharayu nevish-302 geeky-hypertext629 ashutoshrajgupta raghav983093 atiqueakhtar pranavkale03 nmn03 akpaswan67 mundadapurva shreya2713 sayanipr08 72002sweta tanishq-khandelwal srigundeti10 i-am-yuvi nomikagajula ajinkyabhosale15 afpedreros rohitsinghind gopal2021025 itsmanojthapa aditya-ahirwar diphire jatin-code21 psychokot11 diptadip ybhavu bamidelee chandak-keshav sidmadke ishikasaraf20 shaikhheeba07 vinay4563 annakimdev kratikjain10 oneautumleaf diksha4248 anmolyadav1402 bunnythecoder svshsingh ganraj21 sonalguptaa prasadghadage harshkushwaah sayyidalijufri sanjay535 aribaskar-jb sathasivamthirumoorthi dinosaulo shivam-katare rbeaujon riddhi12349 shell-raiser sankalpafernando uddinarsalan sahil-rathod vaishnavi2701-mk davyj123 abhishekkhairnar sandilemnikathi avdeshmukh vishakha0411 pranjalwagh urijah3 kgex jonathanmani amrit2611 kalebarmbrust aayush895 dhruvkhandelwal00 pritam991 vinyashegde priyankatamhankar01 dassoumen98 rayarka26 huzaifa9999 an525ish geeky-auro bibhanshu01

animating-buttons's Issues

Adding animation button

This is a(n):

[x ] Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

I would like to add an animation button in the project.

Remove duplicate animation buttons. 😅

Remove the buttons which are repeated or having same animation.

Add Dark Mode

Add a toggle button in Navbar.jsx to change to dark mode.
Add respective styles for the dark mode.

UI change for the footer section.

Issue

I am a GSSoC'23 participant and I wanted to make certain changes to the UI of the footer section. I feel like the social media icon section would seem more appealing and eye-catching if we align them to center and add the credit section below them.

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

Adding new buttons to the Repository

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:
I would like to contribute to the repository under GSSOC'23 by adding new animated buttons. I have already created a set of animated buttons that I would like to propose for inclusion in the repository.

Hello!
I am a proud contributor at GSSoC '23. I would like to the contribute to this project.

@Spyware007 if you think it is useful then do assign me the issue under GSSoC '23 with the level of the PR as well

Glitch Effect Button

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

I wanna add a button with a cool glitch effect when clicked, made purely in Html and CSS, which is easy to replicate.

Add animated buttons using Javascript. 😍

Currently, there are no buttons that are implemented using JavaScript. 🚀
Try to implement buttons using javascript. 🌟

Pagination Component [GSSoC-2023]

This is a(n):

Update to an existing Animated Button
[ x] Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

I would like to add pagination component so that user can navigate easily.
Please Assign me this issue under GSSoC 2023 I will fix this in future if there are 100's of buttons then it will not be good UX wise.

Dark Mode for Footer ▓

Add dark mode styles for footer 🚀

Design The "Created By [xyz]" In a Better Way To make it look more appealing.

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

The "Created By [XYZ]" tag seems to be so simple. we can add a little more design or attraction to it. This will make site more appealing. I would like to work on this add on as a contributor of GSSOC2023

Add a favicon.

Create a logo for this website and add this logo as a favicon. 🤩
Save all the logo-related files in an src/assets in a separate folder as a logo.😇

To add animated button using HTML and CSS

I'll also make sure to fix broken buttons if I encounter any broken buttons. Kindly assign me this issue under GGSOC 2023.

Adding new button to the collection

I would like to add new button to the collection ,
Please do assign to this task to me under GSSOC 2023 .

This is a(n):

[x ] Update to an existing Animated Button
[ x] Any Error
[ x] Proposal to the Repository
[ x] Documentation / README.md changes
-[ ] adding new button
Details:
Want to add new animated button to website button collection

Functionality to download the html and css code directly of the respective buttons. 🤔

Need some functionality to download the code directly into your local machine with ease.

Add a scroll to top button once the user has scrolled down after the socials link below the navbar GSSOC'23

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

Once the user has reached the bottom of the page,instead of manually scrolling back to the top of the page manually,we can add a small icon to the bottom right corner of the page which on getting clicked directs the user to the top of tha page

Make Footer responsive. 🫡

Add media queries to the footer. 🤩
Add more styles to the footer.

Add animated Buttons 🚀

Add animated button using javascript

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

I create this new issue as you mentioned in the last issue @Spyware007

Homepage Design Improvement

The homepage interface is really nice but it can be improved by making some design adjustments. Working on the design of the homepage, I would like to make it even better.

Functionality to edit the button styles using react live. 😎

Need a functionality to edit the styles of buttons.

Update social link buttons to use new, more modern icons

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

Issue: The current social link buttons on our website are outdated and do not match the overall design of the site. They are also not very visually appealing and do not encourage users to click on them.

Solution: We propose to update the social link buttons to use new, more modern icons that are consistent with the overall design of the website. We will also make the icons larger and more visually appealing, so that they are more likely to catch users' attention.

Benefits: Updating the social link buttons will make our website look more professional and up-to-date. It will also make it easier for users to find and click on the social media links, which will help us to increase our social media following.

Contributor - Sabhi Sharma (GSSOC'23)

Some buttons aren't supporting the dark theme. 😟

Light mode:

Dark mode:

Find such buttons and fix them.

Create CONTRIBUTING.md

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:
I would like to create a CONTRIBUTING.md file so that new comers can understand the basic principles to contribute to the repositories and other related information

Add an animated loader to the entire website. 👀

Add an animated loader for the website which matches the concept of the website.

Improve the performance of the website. 🚀

The lighthouse score of the website is very low. 😭
Find and implement ways to improve the score. 🤩

Functionality to download the app.js code if present. 🫡

Functionality to download the JavaScript code for a particular button if the JS code is present.

A new button animation for the website

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:
The button which I'll be adding to the website looks as below:-

Contributor: Sabhi Sharma (GSSOC'23)

Add new social button

This is a(n):

Update to an existing Animated Button
Any Error
[x ] Proposal to the Repository
Documentation / README.md changes

Details:

social media links like Github ,LinkedIn,twitter

Chat box not fitting

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

The chat box is not visible even when it is scrolled up or down

add animation button using HTML & CSS

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

Improve footer UI

Ui of footer is good but I want to make it more better and informative. Please assign it to me under GSSOC'23

animated button using html and css

.button:hover {background-color: #3e8e41}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>

Animated Buttons - "Pressed Effect"

Click Me

Add animated buttons using HTML and CSS. 🚀

You all can make a PR. I will merge it.

Add animated buttons which are not present here
You can create amazing animated buttons on your own or learn and create one. 🌟
All the best. 👀
Star the repo. 🤩

Add a button made using tilt.js

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

Hey @Spyware007 I want to add a new button that will have a tilt effect. Please assign me this issue. Thank you!

Adding a scroll to top button [GSSOC'23]

A scroll to top button can be implemented in the website

Social Media Icons

I would like to add social media icons , that would increase the look of the page
This is a(n):

Update to an existing Animated Button
Any Error
[x ] Proposal to the Repository
Documentation / README.md changes

Details:

Improving the readme file

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

I would like to improve the readme file of this project and make it more expressive and engaging for the user.

New button to website

I want to add a new button

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:
when we hover over the button it will expand from below creating a semicircle

Add dark mode styles to the download button. 🌆

Currently the styles for download button are same in both Light and Dark mode!
Make sure to add different styles for the dark mode! ⭐

Adding new button [GSSOC 2023 Contribution ]

Want to add new button to the collection ,
I would like to be assigned to this task under GSSOC 2023
Please do assign !

This is a(n):

[x ] Update to an existing Animated Button
[ x] Any Error
[ x] Proposal to the Repository
[ x] Documentation / README.md changes
-[ ] adding new button
Details:
Want to add new animated button the website to button collection

Add a new animated button

I want to work on this issue. Please assign it to me under GSSOC'23

Add a new Download Button with Circular Progress Bar

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:

I would like to add a button similar to the below attached screenshot

Fix broken buttons 💔

Fix any button which looks broken or needs some changes.
Align the buttons in center if not any.

Add a New WebPage Navigation System to copy code instead of downloading it

This is a(n):

Update to an existing Animated Button
Any Error
Proposal to the Repository
Documentation / README.md changes

Details:
I propose a redesign of the website such that instead of downloading the button directly, a different web page is loaded where all the styling files are shown so that the user can copy the code instead.
Motivation: codepen.io