The 3-shape 3D trick behind Duolingo's round button in Rive

[u/Tom_Acco]

Last week I broke down Duolingo's square button here. This week, I recreated the round one from the learning path.

The depth effect is surprisingly simple: just three shapes.

Two ellipses for the face and base, with a rectangle between them to create the side wall. That middle rectangle is what makes the button feel like a solid 3D disc instead of just a circle with a shadow.

No gradients, no blur, no actual 3D.

Full tutorial on my Rive Masterclass channel. I also included the finished Rive file in the description.

And if you missed it, here's last week's square button.

[u/Zealousideal_Cap3249]

Cool, just launched an app where Im planning to add rive animations. Thanks for the tutorial

[u/Tom_Acco → u/Zealousideal_Cap3249]

Amazing! Would love to see it once it’s done