no javascript

27 hand-coded CSS button hover effects — 3D press, neon glow, gradient slide, border draw, liquid fill, ripple, glitch text, and kinetic flips. Every demo is pure CSS (no JavaScript, no framework), tuned for 60fps with transform and opacity, and respects prefers-reduced-motion out of the box.

22 hand-coded CSS dropdown menu designs with live demos — slide-down fade, clip-path curtain reveal, 3D perspective flip, elastic bounce spring, glassmorphism float panel, stagger children reveal, mega-menu grid, underline nav fade, native details/summary, checkbox-hack mobile nav, nested multi-level flyout, icon sidebar flyout, split-screen mega-menu, segmented pill nav, color swatch picker, right-click context menu, keyboard-accessible roving tabindex, stagger blur entrance, command palette search, autocomplete suggestion, click-outside close, and multi-select chip. 15 pure CSS + 7 with a tiny vanilla JS snippet — no framework. WCAG 2.2 aria-expanded + aria-haspopup + focus management, prefers-reduced-motion honoured, MIT licensed.

16 hand-coded CSS fade-in animations with live demos — pure-opacity hero fade with staggered delays, clip-path inset reveal, blur defocus, staggered grid cascade, scroll-triggered IntersectionObserver reveal, directional slide-fade up, scale-up zoom-in, scale-down zoom-in, rotateX perspective tilt, word-by-word split, skew sweep, radial clip-path mask reveal, greyscale-to-color saturate, rotateY flip card, glitch flash multi-step, and cascade letter drop. 13 pure CSS + 3 with a tiny vanilla JS snippet — no framework. animation-fill-mode forwards, prefers-reduced-motion honoured, MIT licensed.

16 hand-coded CSS gradient animations with live demos — aurora mesh hero background, diagonal sweeping linear gradient, radial glow split, dark-mode subtle mesh pulse, glow-on-hover accent button, animated gradient border card, metallic shimmer skeleton loader, neon flowing underline link, infinite gradient text animation, hover-reveal text fill, glassmorphism moving backdrop, retro vaporwave cyberpunk mesh, liquid lava lamp blob, striped progress bar loader, file upload streaming state, and animated toggle switch track glow. 4 pure CSS + 12 with a small vanilla JS snippet — no framework. Modern @property typed-angle + conic-gradient + animation-timeline techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.

20 hand-coded CSS gradient text effects with live demos — animated flow with @property typed angle, aurora borealis sweep, conic hue spin, per-letter rainbow wave, lava lamp radial, neon pulse glow, outline stroke with transparent fill, metallic chrome/gold/copper, holographic iridescent foil, duotone two-colour fill, texture fills (sunset, starfield, ocean), liquid mercury, hover reveal, checkbox toggle picker, scroll reveal, click ripple, cursor-tracked radial, typewriter loop, glitter sparkle, and crystalline prism. 16 pure CSS + 4 with a tiny vanilla JS snippet — no framework. Modern background-clip text technique with -webkit-prefix fallback, prefers-reduced-motion honoured, MIT licensed.

16 hand-coded CSS image gallery designs with live demos — CSS columns masonry grid, click-to-zoom lightbox overlay with focus trap, infinite scroll filmstrip, polaroid stack, tilt parallax cards with mousemove tracking, magazine grid layout, mosaic zoom hover, metro tile grid, perspective depth stack, diagonal clip-path slice reveal, glassmorphism hover cards, 3D cube viewer with perspective rotateY navigation, scattered random-rotation polaroid wall, Ken Burns auto-advancing slideshow, and accordion image gallery. 7 pure CSS + 9 with a tiny vanilla JS snippet — no framework. Every photo is an illustrated inline SVG scene (not a gradient placeholder), prefers-reduced-motion honoured, MIT licensed.

20 hand-coded CSS image hover effects with live demos — zoom-in card, hover reveal text overlay, e-commerce product image swap, grid blur overlay, slide-up caption, grayscale-to-color, color tint overlay, neumorphic image card, glassmorphism overlay, glowing neon border, clip-path morphing, 3D tilt perspective, shining glare sweep, split transition, ripple animation, spinning avatar border, fullscreen background swap, masonry zoom, icon reveal centre, and 3D card flip. 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline techniques, prefers-reduced-motion honoured, CLS-safe via aspect-ratio, WCAG 2.2 AA compliant, MIT licensed.

20 hand-coded CSS responsive navbar designs with live demos — glassmorphism frosted bar, CSS-only mega menu, sidebar drawer, animated underline tabs, pill highlight, scroll-shrink on scroll, synthwave neon, reading-progress breadcrumb, split two-tone, mobile bottom tab bar, conic-gradient animated border, centered logo, icon dot indicator, full-screen overlay, morphing search expand, floating island, step wizard, vertical rail, dual announcement bar, and scroll-spy active highlight. 14 pure CSS + 6 with a tiny vanilla JS snippet — no framework. Mobile-first, WCAG-friendly, copy-paste ready, MIT licensed.

16 hand-coded CSS side menu designs with live demos — slide-in checkbox-hack drawer, smooth-overlay panel, off-canvas push sidebar, expandable icon-only rail, responsive hidden-to-visible menu, sticky fixed vertical nav, multi-level accordion, full-height flexbox, neumorphic inset, glassmorphism blurred, dark-mode cyberpunk neon, brutalist left-hand border, hamburger checkbox-hack, hover-triggered drawer, collapsible width-transition, and CSS-only accordion side navigation. 100% Pure CSS — no JavaScript, no framework. WCAG 2.2 friendly with prefers-reduced-motion on every animation, MIT licensed, copy-paste ready.

Hand-coded CSS sidebar navigation patterns — collapsible rails, drawer menus with text and icons, nested vertical navigation, sidebar dropdowns, sticky full-height layouts, glassmorphic blur, mobile slide-out overlays, and bottom-pinned profile sidebars. Pure CSS, no framework, copy-paste ready.

25 hand-coded CSS text animations with live demos — typewriter, gradient text, glitch, neon glow, clip-path reveal, letter spacing, wave, shimmer, fade-up stagger, 3D flip, SVG stroke draw, bouncing letters, blur reveal, perspective rotation, text-shadow pulse, morphing text, liquid fill, word scramble, split-text explosion, holographic chrome, decryption, elastic bounce, cursor blink, mask wipe, and kinetic typography. 16 pure CSS (no JavaScript) + 9 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + variable-font techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.

20 hand-coded CSS text gradient effects with live demos — hero title, Web3 neon glow, corporate logo, bold minimalist, hover transition, gradient button, active nav link, animated moving gradient, cyberpunk neon, metallic gold, glassmorphism contrast, pastel soft, vertical gradient, radial gradient, rainbow multi-colour, text stroke outline, @supports fallback pattern, Tailwind utility recipe, multiline paragraph, and dark-mode vs light-mode gradient swap via light-dark(). 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + light-dark() techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.

14 hand-coded CSS typewriter effects with live demos — canonical pure-CSS steps() + ch cursor, multi-line stagger, infinite word-swap loop, neon terminal prompt, clip-path reveal mask, SVG stroke-dashoffset handwriting, gradient highlight sweep, variable-font weight morph, per-character split stagger, vanilla-JS character injection, Matrix-rain scramble decode, RGB-channel glitch-on-type, syntax-highlighted code-editor typewriter, and scroll-triggered word reveal. 9 pure CSS (no JavaScript) + 5 with a tiny vanilla JS snippet — no framework. Modern @property + steps() techniques, prefers-reduced-motion honoured, MIT licensed.