I created this project to practice some cool Css animations. I did them in the form of buttons that when hover create an effect, but don't be confuse! All the Effect you will find in this project are not limited at all to only be use in buttons.
I added a lot of comment along the way to help myself and anyone else that want to learn and find inspiration from this project, at the end of the day... Sharing is caring ! and if my journey on CSS can help other developers I'll be more than happy ! :)
You will find all 4 tranform functions being applied here, as well as 2D and 3D effects.
Remember there is many different ways to accomplish the same result so if you find a better one than mine feel free to share.
- I created this React project using Vite (Is quite new to me too, but so far seems like a great alternative to the good all create-react-app).
- Every animation was created using pure CSS and jsx to add the element in the DOM.
- Clone the project to your machine
- npm run dev will start the project in your localhost
- Time to play around with the effects!
- You will see that there if 3 routes, all btns are imported in the Button.jsx route
- Every button has its own folder inside Components with it's own jsx and CSS file.
Hope you enjoy learning CSS animations as much as I do :)
