UI Buttons
Hover to explore · See it in action ↓
Design Overview
This project explores interactive button design in Framer, focusing on micro-interactions and motion-driven feedback. I created 7 unique button variations, each experimenting with different visual and interactive effects: from gentle highlights and sparkles to playful bubbles and a magnetic cursor interaction.
The purpose of this work was to push the boundaries of subtle UI animations and explore how motion can enhance user engagement without compromising clarity or usability.
Design Process
The design process began with research into modern UI button interactions and micro-animations, aiming to combine playful elements with functional design. I sketched initial concepts in Figma to define the motion ideas, focusing on timing, easing, and responsiveness to ensure interactions feel natural.
Implementation took place in Framer, where each button was built with interactive states that allowed me to experiment with effects such as bubble animations on click, subtle hover glows, spark effects, and a magnetic cursor behavior. Throughout development, I iteratively refined the timing, intensity, and responsiveness of each animation, balancing visual impact with usability. The final set of buttons maintains a cohesive style, providing a playful yet elegant interactive experience that can adapt to a variety of modern interfaces.
