DEV Community


#CodepenChallenge Monochromatic ConfettišŸŽ‰ Button

Takane Ichinose
A full-stack web developer who don't stop studying, and practicing.
惻1 min read

Monochromatic ConfettišŸŽ‰ Button


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.



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

Font used:

Fredoka One from Google Fonts

Live Demo

Discussion (0)

Forem Open with the Forem app