Button Study

A personal exploration in motion, interaction, and delight.

This project started as a self-directed experiment to push my skills as a UX motion designer. I wanted to explore how interactivity and motion can inspire delight and curiosity while still feeling usable, buttons that people actually want to press again and again.

It was also a great excuse to learn a new tool, Rive, and see how far I could take it in creating interactive, real-time motion for the web.

Concept

There wasn’t a single theme tying the buttons together, each one was its own little playground for testing ideas about motion, timing, and feedback. Some were practical, others purely for fun.

Process

Most ideas started from something that caught my eye, a slick animation, a satisfying transition, or an interaction I’d seen in a game or app. From there, I jumped straight into Rive, building and animating directly in the tool.

Each button involved defining their various states (idle, hover, pressed, etc.) and wiring them together using Rive’s state machine. Occasionally I’d sketch something out if the logic felt complex, but most of the time, I was able to prototype straight in Rive and iterate quickly.

The process was very hands-on and iterative, part design, part troubleshooting.

Challenges & Discoveries

Rive’s state machine can be tricky to wrap your head around, especially coming from Figma and After Effects, which handle animation in much more linear ways. I spent a lot of time figuring out how to make different states blend seamlessly and respond instantly to different types of inputs.

Integrating the animations into Webflow added another layer of challenge, the two tools don’t always talk to each other smoothly without custom code. But working through that helped me better understand the technical side of motion for the web.

On the visual side, I’m still refining my craft, making the buttons look not just fun, but also polished enough to live in a real product. It’s been a great exercise in balancing playfulness with professionalism.

What I Learned

This project deepened my understanding of how motion supports usability, not just by giving feedback, but by making interactions inherently more engaging. Small moments of delight can encourage exploration and repeat interaction, which is a powerful tool in UX design.

I also learned a lot about technical integration, from setting up interactive animations in Rive to embedding them in Webflow and understanding their limitations.

Next Steps

I plan to keep expanding this study with new interactive elements, buttons, toggles, and beyond. I’m interested in exploring loading states, screen transitions, and micro-interactions that help create a cohesive motion system across an interface.

Ultimately, I want to design motion that feels alive, intuitive, and enjoyable, making the everyday act of clicking a button just a little more magical.