A button that grows, then presses down.
Make an animated button in your browser, nothing uploaded: it grows when pointed at and presses down when pressed, and is saved as a .riv for a site or an app.
By Suraj Kumar5 min read
A button that answers your pointer feels alive. Making one usually means writing code for every state. KeepSimp's interactive button maker gives you one that already reacts, made with a state machine you can change in your browser, and saves it as a .riv.
Start from a button that reacts.
The page opens the Animation maker on a starter button. It grows a little when the pointer is over it and presses down when it is pressed.
A state machine does this. It has two inputs: a Hover switch, on while the pointer is over the button, and a Press trigger, fired when it is pressed. Listeners for the pointer set them.
Try it in the editor.
Press Try it, then point at the button and press it, right on the artboard. Change its colours, how much it grows, or the timing of its keys, and try it again. Every change can be undone.
Easing decides how each change feels: Overshoot for a little bounce as it grows, Slow down for a soft press.
Save it for a website or an app.
Export is set to An interactive animation for a website or an app, which writes a .riv, the file Rive's runtimes play. Rive's own runtime reads it back before it is offered, and the result shows a few lines of code that play it on a page with the @rive-app/canvas npm package.
The .riv is made for Rive's runtimes; Rive's editor may not open it. A GIF, a video or a Lottie of the same button plays one way and does not react.
Further reading
Topics: interactive button maker · animated button · button hover animation · button press animation · interactive button animation · hover and click animation
A little less theory. A little more doing.
Try it on your own terms, with a free browser tool.
Try the tool