DEV Community

Takane Ichinose
Takane Ichinose

Posted on

#CodepenChallenge Monochromatic Confetti🎉 Button

Monochromatic Confetti🎉 Button

Description

The color palette I used at the background, button, and confetti itself in this pen is purple, because I love the purple color.

This button is made in ReactJS, and GSAP.

I used React Hooks useState for state handling of this functionality.

I used GSAP timeline for the stretching of button, and normal GSAP animation for the confetti.

What does this do

This is an example showy UI of a button.

When you click on the button, it will pull down, then explode like a confetti.

Maybe, this is useful when the user does something that was successful, example registration on the website.

Resources

Javascript:

ReactJS for the functionality, and action. GSAP for animation.

Font used:

Fredoka One from Google Fonts

Live Demo

Top comments (0)