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.
Top comments (0)