Build Duolingo's Round Lesson Button in Rive

You have pressed this one too. The round button on the Duolingo path, the one sitting there between two lessons waiting for you to tap it.

It looks harder to build than the green CONTINUE button. It has more depth, and the icon inside looks stamped into the surface rather than drawn on top of it. But there is still no real 3D anywhere, no code, and the machine underneath is the same one we already built.

That is the point of this one. The first tutorial covers the press behavior, the two states, the listeners and the color coming from data. Here we do not rebuild any of that. We duplicate it and change what it looks like. So if you have not built the square button yet, either do that tutorial first, or grab the finished file below and start from there.

What actually changes

The machine stays. The drawing gets replaced:

1. The button becomes three shapes, two ellipses with a rectangle between them
2. The label becomes an icon drawn in its own artboard, so it can be swapped later
3. There are two icons, sitting in a Solo group
4. The color binding has to be reconnected, because the original shapes are gone

Step 1 - Building the button from 3 shapes

Start by duplicating the square button.

That is the reuse trick, and it is the reason this build is short. The copy already carries the State Machine, the Default and Pressed states, the listeners and the View Model. You keep the machine and throw away the drawing.

So delete the shapes, and build the round button from three:

• An Ellipse at 62 x 48 for the face. Wider than it is tall, which reads as a disc seen slightly from above instead of a flat circle
• A copy of it sitting lower down, for the base
• A rectangle between the two, joining them. This is the wall of the disc, and it is what makes the depth look solid instead of looking like a flat circle with a shadow behind it

Same principle as part one: the base is not a second green you picked by hand. It carries a black Fill at low opacity, so it is a shade derived from whatever color the button happens to be.

Step 2 - Creating the checkmark icon

Draw the checkmark with the Pen tool (P), size it to the button, and give it a color.

Build it as its own artboard, not as a shape sitting on the face. That single decision is what makes everything later possible. An icon that lives in its own artboard can be swapped for another one, and eventually chosen by data.

It moves inside the Face group in a moment, once the states are wired.

Step 3 - Setting up the Default and Pressed states

Put the face in a group, then update the two states that came with the copy:

• In Default, key the face group at its resting position
• In Pressed, move it down until it sits at the bottom of the ellipse

Nothing new gets created in the State Machine. The isPressed Boolean, the transitions and the 100ms cubic easing all came along with the duplicate.

Step 4 - Wiring the listeners

Point the listeners at the new face shape:

• Pointer Down sets isPressed to true
• Pointer Up sets it back to false

Down and up as separate events, not a single click, so the button stays pressed for as long as you hold it.

Step 5 - Adding the dark overlay on press

Add another Fill on the face, black, and key its opacity at 0% in Default and 20% in Pressed.

The button never changes color when pressed. It gets a shade of itself laid on top. That is why a pink or blue button presses correctly without you touching anything.

Now move the checkmark artboard inside the Face group, so it travels down with the face instead of floating in place while the button sinks.

Step 6 - Creating the star icon

The second icon, this time with the Shape tool:

• 35 x 30, 5 points
• Corner Radius 2.5, so the tips are soft instead of sharp
• Inner Radius 56%, which is what makes it chunky rather than spiky

Then turn it into its own artboard, the same way the checkmark is.

Step 7 - Putting both icons in a Solo group

Both icon artboards go into a Solo group.

A Solo group shows one child at a time, which turns the group itself into an icon slot: one position on the button, several possible icons, exactly one visible. For now you pick which one by hand.

Step 8 - Binding the color to the View Model

Here is the catch of starting from a copy. The bindings survived the delete, the shapes did not, so the new ellipses are connected to nothing.

Bind them back to buttonColor. One value, and the face, the wall, the base shade and the pressed state all follow, because each of them is either that color or that color with black on top.

Step 9 - Faking the 3D on the icon

Duplicate the icon, offset the copy slightly, and fill it black at 20%. That is the shadow the icon casts into the surface.

Then two inner layers on the icon itself, flat, no blur: one darker, one lighter, offset the opposite way. The dark sits low, the light catches the top edge, and your eye reads the icon as pressed into the button instead of drawn on top of it.

Flip those two and the same layers make the icon pop out. Nothing else changes. No blur, no gradients, no lighting.

The whole thing goes into the group as well, so the engraved treatment travels with the icon.

Where this goes next

One thing is still manual.

The color comes from data. The icon does not. To show a star instead of a checkmark you still open the Solo group and pick it by hand, in the design.

The step that fixes that is an enum: one property with a case for each icon type, connected to the Solo group through Artboard Binding. Once it is wired, you control the icon from the View Model instead of from the design itself, exactly like the color. That is the moment a button stops being a drawing and becomes a component you can ship, and a whole learning path turns into one list of values.

That is the kind of thing the Rive Masterclass goes through properly, building a full interactive app from scratch rather than one button at a time.