RSK World - Liquid Button Effect | Wave Animations, SVG, Fluid Transitions | RSK World

Liquid & Waves Magnetic & Particles Morphing & Loading Sound & Theme Vanilla JS

Liquid Button Effect is an advanced CSS UI demo with SVG wave animations and fluid transitions. Features: primary, secondary, gradient, neon, large, and small liquid buttons; magnetic attraction, particle explosions on click, shape morphing, loading states with progress, multi-layer wave effects, Web Audio click sound, dark/light theme with persistence. Ultra-advanced: 3D perspective tilt, gesture recognition (simulated), AI adaptive (interaction tracking), multi-user sync (simulated), haptic feedback, voice activation (Speech Recognition), blockchain verification (simulated), quantum state (simulated). index.html, assets/css/style.css, assets/js/script.js. By rskworld.in.

If you find this Liquid Button Effect project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Liquid Button Effect

Liquid Buttons & Wave SVG

Each button uses an SVG with a wave path and a liquid-fill overlay. On hover, the path animates (waveMotion keyframes) and the fill slides across. JavaScript adds 3D tilt from mouse position and dynamic wave path updates.

SVG wave-path with quadratic curves; fill animates on hover
liquid-fill div slides left -100% to 100%
handleLiquidMouseMove: tilt + updateWavePath + updateLiquidFill
Touch support via touchstart/touchmove/touchend

Project Structure & Files

liquid-button/ with index.html (all button demos), assets/css/style.css (themes, keyframes, button variants), assets/js/script.js (magnetic, particles, loading, sound, voice, etc.). No build step. Open index.html or serve folder.

liquid-button/ – index.html, assets/css/style.css, assets/js/script.js, README.md, LICENSE
No build step – open index.html or static server
Google Fonts Poppins (CDN)
Zero dependencies; vanilla HTML, CSS, JavaScript

Themes & Button Variants

CSS variables for default, dark, and light themes; theme toggle saves to localStorage. Six base liquid buttons (primary, secondary, gradient, neon, large, small) plus advanced (magnetic, morphing, particle, loading, multilayer, sound) and ultra-advanced (3D, gesture, AI, collaborative, haptic, voice, blockchain, quantum).

Themes: :root, [data-theme="dark"], [data-theme="light"]
initThemeToggle(), setTheme(), localStorage theme
Wave keyframes: waveMotion, neonPulse, morphShape
prefers-reduced-motion disables animations

Advanced & Ultra-Advanced Effects

Magnetic: cursor pull via transform. Particle: canvas explosion with gravity on click. Morphing: border-radius and scale animation. Loading: spinner and progress bar. Sound: Web Audio beep. Voice: SpeechRecognition for "activate"/"click". Haptic: navigator.vibrate. Others are simulated (blockchain, quantum, gesture, AI, collaborative).

createParticleExplosion – canvas, particles array, requestAnimationFrame
playClickSound() – Oscillator + GainNode
startVoiceRecognition() – SpeechRecognition API
handleMagneticEffect, handle3DPerspective

Ripple & Interactions

Click creates a ripple div with scale + opacity animation then removed. Keyboard: Tab focus, Enter/Space to activate. Scroll-to-top button and copy-details button. Parallax on header; smooth scroll for # anchors.

createRippleEffect – ensureRippleStyles, ripple div, animation
initScrollToTop, initCopyCode (clipboard or execCommand fallback)
addInteractiveEffects – header parallax, feature card hover
Skip link and focus outlines for accessibility

What You Get

Static HTML/CSS/JS: liquid-button/ folder with index.html, assets/css/style.css, assets/js/script.js, README.md, LICENSE. No build step. Open index.html or serve folder.

Complete source – liquid-button/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE included
Technologies: HTML5, CSS3, SVG, Vanilla JS. © 2026 RSK World.

Usage

Open index.html. Hover over liquid buttons for wave and fill effects. Try magnetic (cursor pull), particle (click for explosion), loading (click for progress), sound (click for beep), voice (click then say "Activate"). Toggle theme in header. Use scroll-to-top and copy-details buttons.

liquid-button/index.html – single page with all demos
script.js: initLiquidButtons, initAdvancedButtons, initUltraAdvancedButtons
Accessibility: skip link, aria-labels, reduced motion
Author: RSK World | rskworld.in

Project Features

Wave animations, fluid transitions, 6 base + 6 advanced + 10 ultra-advanced button types, theme toggle with persistence, particle explosions, magnetic effect, 3D tilt, voice activation, haptic feedback, ripple on click, responsive layout.

Liquid – SVG wave, liquid-fill, 3D tilt from mouse
Advanced – magnetic, particle, morphing, loading, multilayer, sound
Ultra – 3D perspective, gesture, AI, collaborative, haptic, voice, blockchain, quantum
Feature cards grid and implementation details section