https://github.com/eduardconstantin/comic-book-button-anim

Button animation made with reactJS that has a comic book style
https://github.com/eduardconstantin/comic-book-button-anim

animation css html jsx reactjs typescript

Last synced: about 1 year ago
JSON representation

Button animation made with reactJS that has a comic book style

• Host: GitHub
• URL: https://github.com/eduardconstantin/comic-book-button-anim
• Owner: eduardconstantin
• License: cc0-1.0
• Archived: true
• Created: 2022-05-01T08:45:09.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-09-13T18:37:40.000Z (almost 3 years ago)
• Last Synced: 2025-03-24T19:48:55.382Z (over 1 year ago)
• Topics: animation, css, html, jsx, reactjs, typescript
• Language: TypeScript
• Homepage: https://eduardconstantin.github.io/Comic-book-button-anim/
• Size: 49.8 MB
• Stars: 22
• Watchers: 1
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: Code_of_Conduct.md

Awesome Lists containing this project

README

          
Comic book button animation


 I did a little experiment with react, trying to make a comic book like button animation. Inspired by Spider-man into the spider-verse movie.

### What I learned making this project:

- Fundamentals of react.js: components, imports, props, states, installing modules, framer motion

- CSS modules

---



 Usage 


``` javascript

import ComicButton from './components/ComicButton/ComicButton';

export default function App() {

  return (

    


      

    

  );

}

```

## Props

* buttonName - string for button name

* hoverBtnName - string for hover button name


## Steps to follow :scroll:

### Tip : Complete this process in GitHub ( In your browser 🌐)

```mermaid

flowchart LR

    Fork[Fork the project]-->branch[Create a New Branch]

    branch-->Edit[Edit file]

    Edit-->commit[Commit the changes]

    commit -->|Finally|creatpr((Create a Pull Request))

    

 ```

 

 ### Star The Repository :star2:

## Contributing

If you think you can make an improvement don't hesitate to open a pull request.

## Contributors

[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)

  

    

      
Juanita
💻

      
Pavan Kamthane
📖

      
Vedant Kahalekar
📖

      
Mldamico
💻

      
Amresh Prasad Sinha
💻

      
Frey0-0
📖

      
Jay
💻

    

    

      
Aaheli Sadhukhan
💻

      
Najeeb Thangal KP
💻

      
Musavveer Rehaman
💻

      
Tushar Singh
💻