magnetic button hover
All collections tagged with "magnetic button hover"
36 CSS Button Hover Effects
36 hand-coded CSS button hover effects — 8 brand-new premium micro-interactions (magnetic ripple attraction, cyberpunk holographic glitch grid, frosted glassmorphism shimmer glow, SVG organic blob morph, dual-line intersection border draw, isometric tactile 3D depress, infinite sliding kinetic marquee, chroma conic border spin), 27 shipped classics (liquid fill, neon pulse, glitch slice, ripple wave, 3D press, cursor spotlight, and more), plus a Liquid Glass add-to-cart CTA with SVG displacement ripple that warps the frosted surface on click (Apple iOS 26 / macOS Tahoe aesthetic). Each title packages 2-3 side-by-side sub-variant designs — 90+ total button designs in one collection. Ready-to-ship for SaaS CTAs, fintech premium tiers, e-commerce checkout, gaming portals, and web3 dashboard button micro-interactions. Real semantic <button>, keyboard-operable with :focus-visible ring, animates transform / opacity / filter / clip-path only (CLS 0, INP-safe), prefers-reduced-motion respected, decorative layers aria-hidden. Namespaced scoped CSS drops into Tailwind v4 with zero collision. MIT licensed.
30 CSS Hover Effects
30 hand-coded CSS hover effects covering every production interactive pattern shipping today — text hover (underline draw, glitch, letter-spacing expand, gradient reveal, split text, neon glow), button hover (magnetic liquid, border draw, shimmer shine, fill wipe, 3D press, ripple), card hover (3D tilt, flip, glassmorphism, spotlight, slide reveal, stack lift), image hover (zoom-pan, color channel split, distortion, duotone, curtain reveal, Ken Burns), navigation hover (underline slide, highlight fill, strikethrough link, inline word swap), and pointer-tracking effects (cursor dot trail, magnetic pull). 24 demos are 100% pure CSS using <code>:hover</code> + GPU-accelerated <code>transform</code> / <code>opacity</code> transitions; 6 use ~30-60 lines of vanilla JavaScript for pointer-coordinate tracking. All respect <code>prefers-reduced-motion</code>, use scoped <code>.hv-NN__*</code> class names so multiple effects coexist on the same page without style bleed, ship INP-safe (no layout-triggering animations), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, or WordPress — zero framework dependencies.
26 CSS Link Effects
26 hand-coded CSS link and text hover effects covering every real-world pattern: animated underlines, gradient text with background-clip, border-draw traces, slide-in fills, liquid text fill, glowing halos, wavy squiggles, character morphs, dotted focus rings, encircled outlines, chevron arrows, terminal cursors, neon flickers, heartbeat pulses, sweep reveals, letter push staggers, marker highlighters, background slides, crosshair brackets, glitch splits, ink bleeds, magnetic cursor pulls, caret trails, brutalist shadows, 3D text flips, and typewriter type-on reveals. Copy-paste HTML and CSS, WCAG 2.2 accessible focus-visible, prefers-reduced-motion guarded, framework-agnostic.
15 CSS Navigation Menu Designs
15 hand-coded CSS navigation menu designs covering every production navigation pattern developers ship — horizontal navigation bar with hover underline, dropdown navigation menu, full mega menu with category columns and feature panel, hamburger menu with slide-out drawer, full-screen overlay navigation, sticky navigation bar with scroll shrink (scroll-driven CSS animation), sidebar navigation menu, tab navigation with animated sliding indicator, breadcrumb navigation, glassmorphism navigation (frosted-glass backdrop-filter pattern), animated navigation icons with labels, multi-level accordion navigation, navigation with magnetic hover effect, neon glow navigation menu, and morphing navigation pill indicator. 13 demos are 100% pure CSS using <code>:hover</code> + <code>:focus-within</code> + <code>:checked</code> state machines — drop into any stack with zero JS dependencies. 2 use ~20-50 lines of vanilla JavaScript for sticky-scroll behaviour and pointer-tracking magnetic hover effects. All ship semantic <code><nav></code> + <code><ul></code> markup with <code>aria-current="page"</code> on the active link, <code>aria-expanded</code> on toggles, <code>aria-haspopup</code> on dropdown triggers, respect <code>prefers-reduced-motion</code>, use scoped <code>.nav-NN__*</code> class names so multiple navs coexist on the same page without style bleed, ship with 44×44px tap targets (WCAG 2.5.5), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress, Shopify, or any other stack.