DEV Community

Takane Ichinose
Takane Ichinose

Posted on

#CodepenChallenge 'Add To Cart' Button Microinteraction

This is a micro-interaction of an 'Add To Cart' button; created using web components' custom element, and shadow DOM.

In my opinion, setting the background-color into purple instead of green is better, because green color stands-out more than the purple color. Hence, setting the background color of the button into green color, will stand-out more.

I created the animation effect using GreenSock Timeline.

The GSAP animation timeline can be found inside this method addToCartAnimation.

The animation will be cleared 3 seconds after the button was clicked (Including the whole animation time).

I created the cart SVG icon using Inkscape.

Discussion (0)