Library • 34 CSS interactions
CSS microinteractions
34 copy-paste CSS microinteractions: button hover effects, animated links and focus states, each with a live preview and plain CSS or Tailwind code.
Click feedback 30
- Next Dot Fill ButtonA bordered pill whose leading dot expands into a solid fill while the label swaps for an arrow cue.
- 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.
- 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.
- 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.
- 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.
- Aurora Download ButtonA layered blue download button with a luminous rim, directional shadow, and blended hover bloom.
Inputs 1
Navigation 3
- 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.
- Floating Newsletter ButtonA compact newsletter button that scales and lifts into a soft white glow on hover.