A Duolingo-style 3D button: the face sinks onto its lip while pressed. It sizes itself to its text, and one colour drives the face and the darker lip.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1The text sets the widthA hug layout around the label, so any word fits.
- 2One colour, two tonesThe lip is the same colour with a dark layer on top.
- 3Press is paddingPressing moves padding from below the face to above it.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function DuoButton() {
const { rive, RiveComponent } = useRive({
src: '/duo-button.riv',
artboard: 'Duo Button',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('color').value = 0xFF58CC02;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: label, color, textColor. All on the DuoButton view model.