Like This?
The best interactions reveal complexity only when curiosity is sparked.
Human emotions aren't binary. Yet most interfaces force us into simple thumbs up or down reactions—a digital reduction of our complex feelings into 1s and 0s.
This component respects that users want nuanced choice without cluttering their space. Initially, it presents just a single like button, respecting the visual real estate of your interface. But hover over it, and two additional options smoothly bloom from the center: "dislike" flows to the left, "love" extends to the right.
Hover to see options: dislike, like, love
Current: none
The magic is in the restraint and the reveal. Rather than overwhelming users with options upfront, it progressively discloses choices only when interest is shown. The smooth animations aren't just eye candy—they create a moment of pause that transforms reflexive clicking into intentional selection.
Three core principles guide this interaction:
Smooth: Micro-animations that feel natural, not jarring. Buttons emerge from the center with gentle easing, creating a sense of organic growth rather than abrupt appearance.
Respect User Space: Your interface stays clean until engagement signals intent. No visual noise, no cognitive overload—just thoughtful progressive disclosure.
Respect User Choice: Beyond binary reactions, users can express "I love this" or "not for me" with the same effortless interaction, honoring the full spectrum of human response.
Sometimes the best interactions are the ones that get out of your way until you need them. This component does exactly that—giving users the simplicity they expect and the nuance they deserve, all in one smooth motion.