Library • 43 interactions
All components
Every MicroKit UI microinteraction in one list: 43 animated buttons, hover effects, tabs and inputs, each with a live preview and copy-paste React, CSS and Tailwind code.
Click feedback 36
- 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.
- 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.
- Download for iOS ButtonAn outlined iOS download button whose arrow reveals without changing its 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 1
Navigation 6
- 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.
- 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.