Mobile UI design

Done button · squeeze, tick, burst

A focus timer's lime Done pill answers in three beats: the label fades and the pill squeezes into a circle, a check draws itself inside, and a moment later a ring of coloured particles bursts out across the card while the line under the timer turns to 'Nice work, session saved'. Tap the check to start a fresh session.

What it is

A Done button that thanks you properly: it squeezes into a circle, draws a check and then bursts into a little ring of colour across the card. Finishing a focus session should feel like an event, and this is how small that event can be.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@西瓜同学 (Douyin) · 第 14 集「6 个高级交互和控件 Six Touches, One Small App」 · 01 完成反馈按钮 Done Button · 0:09–0:14 (3× playback)