Library • 54 interactions
All components
Every MicroKit UI microinteraction in one list: 54 animated buttons, hover effects, tabs and inputs, each with a live preview and copy-paste React, CSS and Tailwind code.
Click feedback 41
- Cursor Edge Glow ButtonA spring-tracked pill light with mirrored edge glows that crossfade as the pointer changes sides.
- Cursor Follow Share ButtonA dark share pill with a glowing send orb that tracks the pointer and a looping upward text swap.
- Hold to Delete ButtonA delete button that only fires when held: an orange bar fills linearly from left to right as a matching glow builds behind it, snapping back if you let go early and landing on a check with a pulse once it completes.
- Fuse Undo ButtonAn archive button that turns into Undo and lights an orange fuse around its outline; the fuse holds still while you hover it, so the chance to undo only runs out once you look away.
- Progress Ring CheckA task status icon whose dashed ring closes into a spinning arc, fills to its progress, then draws a check or a cross and strikes the label through.
- Next Dot Fill ButtonA bordered pill whose leading dot expands into a solid fill while the label swaps for an arrow cue.
- Secure Purchase ButtonA purchase button that opens room for a pixel-wave loader, swaps it for a shield once the payment clears, then resets itself.
- Expanding Contact ButtonA pill-shaped call-to-action with an expanding background and arrow icon, adapted from the supplied Webflow export.
- Contact Reveal ButtonA circular arrow and label that resolve into a polished contact pill on hover.
- Contact Details RevealA compact white contact label that shifts upward to reveal muted contact details with an orange accent.
- Subscribe Shine ButtonA dark subscribe pill with a rotating highlight that traces its edge on hover.
- Expanding Newsletter ButtonAn orange newsletter pill with a growing dark circle and an arrow that slides in from the left.
- Next Reveal ButtonAn outlined arrow control that expands into a bright Next button on hover.
- Pricing Slide LinkA text link whose arrow slides in from the left as the label settles into place.
- Read More SwapA text link whose arrow swaps from the right side to an orange leading arrow on hover.
- Projects Arrow ButtonA Projects label paired with an outlined circular arrow that slides through itself on hover.
- What's New Glow ButtonA dark, fully rounded button whose orange and blue glows follow the cursor.
- Preview in Browser ButtonAn outlined pill button with a diagonal arrow that slides through on hover.
- Icon Swap ButtonA leading icon slides out as an arrow opens in to take its place, trading without changing the button's width.
- Magnetic Fill ButtonA magnetic pill button with a bottom-to-top background fill.
- Sliding Send ButtonA bordered share pill whose label glides right as an orange send icon enters from the left.
- Get Started Circle SwapA bordered CTA whose orange circle exits right as a directional arrow slides into place.
- Outline Wipe ButtonHollow stroked lettering that fills with orange behind a rounded bar sweeping left to right.
- Project Text Swap ButtonAn outlined pill whose duplicated label swaps vertically on hover.
- View More Text SwapA borderless View More label that swaps vertically on hover.
- Staggered Letter Text SwapA surface-free text interaction with a staggered per-letter upward replacement.
- Staggered Letter Glow ButtonA dark pill with inward orange edge glows and a staggered per-letter upward text swap.
- Gradient Underline ButtonA label that scales up as a warm gradient underline grows across it.
- Yellow Fill Preview ButtonAn outlined Preview in browser button that fills with yellow from the left.
- White Contact Orbit ButtonA white Get in touch pill whose arrow settles into a black circular control on hover.
- Circle Surface ButtonA circular CTA whose dark surface expands into an orange fill.
- Inset Circle ButtonA circular project CTA that reveals its dark base as the inset surface collapses.
- Sliding Arrow LabelA text label that gets a bright surface while an arrow slides in beside it.
- Orange Circle Fill ButtonAn orange outlined pill that fills from a growing circle.
- Layered Gradient ButtonA dimensional pill with gradient text and subtly shifting layered surfaces.
- Glow Arrow ButtonA bright CTA with a soft glow and a moving arrow on hover.
- Talk Arrow Reveal ButtonAn outlined Talk to us pill that fills with orange and reveals a long arrow.
- See More Swap ButtonA pill button whose arrow circle swaps sides while its surface changes color.
- Neon Invert ButtonA bold orange CTA that inverts into a dark, softly glowing surface on hover.
- Contact Underline ButtonA compact contact action whose icon turns orange while an underline draws beneath the label.
- Aurora Download ButtonA layered blue download button with a luminous rim, directional shadow, and blended hover bloom.
Inputs 3
- Focus FieldAn input with a clean animated focus treatment.
- Bounce CheckboxA checkbox whose fill springs out past the box with a little swell, draws its tick, then strikes the label through and dims it.
- Scrub Number FieldA number field you drag to scrub and click to type, with a ruler that tracks the gesture.
Navigation 10
- Social Icon ButtonsCircular social links that trade their icon for a brand-colored arrow and glow on hover.
- Social Highlight CardsSocial cards with a luminous top rail, a soft brand-colored wash, and matching icons on hover.
- Blur Glide MenuA nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
- Expanding Icon TabsAn icon bar where the chosen tab widens to reveal its label and the rest of the row slides over to make room.
- Preview Hover ToolbarA thin empty pill that grows wider and taller off its fixed bottom edge when the surrounding preview is hovered, scaling its actions in one after another with a label above each.
- Hover Glide CardsOne highlight glides from card to card under the pointer, seen only through the cards themselves, so it drains out of one and fills the next.
- Spotlight IndicatorA glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
- Sliding Content TabsA compact tab switcher with a sliding active surface and content transition.
- Sliding Underline TabsA compact tab switcher with an orange underline that glides between labels.
- Floating Newsletter ButtonA compact newsletter button that scales and lifts into a soft white glow on hover.