FancyUI
Saved GitHub Get started
Button — label roll — preview

Button — label roll

FancyUI FANCYUI

Two labels swap on a vertical roll while a dot grows into the fill.

#playful#minimal#hover

Open docs

Use in FancyUI

Type
Interaction
Interaction
Hover
Style
Playful, Minimal
Code availability
Open source

Why it works

One hover runs three coordinated moves: the label rolls up and blurs out, the second label rolls in, and a dot grows into the background fill. A single transition-delay ladder keeps them in step.

When to use it

A secondary call to action that should feel crafted on pointer devices.

Things to watch

On touch the second label is never seen, so the first must carry the meaning. The roll lives under `no-preference`.

Implementation clues

  • overflow clip
  • translateY 70%
  • blur on exit
  • one transition-delay ladder