A CSS-only technique for animating items into a shopping cart using radio button pairs that toggle states to trigger smooth transitions. Each product contains two radio inputs with the same name attribute, creating a see-saw effect when clicked. When selected, items shrink and move to the cart position using CSS transforms and transitions. The approach includes JavaScript for counting items and discusses accessibility limitations due to duplicate interactive elements. The author suggests modern alternatives like the View Transitions API for better implementation.

6m read timeFrom css-tricks.com
Post cover image
Table of contents
The LayoutSelecting ItemsKeeping CountAccessibility?Maybe Use View Transitions Instead?

Sort: