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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️