Fluid delete button

September 20, 2024

Digging deeper into fluid interface elements, I created this delete button, challenging present multi-step confirmation interactions. After a user decides on his action, a countdown appears, letting the user cancel an otherwise irreversible action.

The button is made using Tailwind, Framer Motion and an SVG gooey effect to facilitate the smooth morphing. Parts of the button label preserve it's state through the interaction, adding a layer of fluidity.

Delete
A portrait of Michael Sommer, the Design Engineer