Liquid Metal Button is a cutting-edge, shader-driven component that transforms a simple CTA into a dynamic, tactile experience. Powered by real-time fragment shaders, it simulates flowing metallic surfaces that react to hover and click — creating a sense of depth, motion, and physicality rarely seen in UI components.
From subtle idle waves to reactive ripple feedback, every interaction feels intentional and alive. This is not just a button — it’s a visual centerpiece.
Real-Time Liquid ShaderA GPU-powered metallic surface that flows continuously, delivering a premium, futuristic feel.
Dynamic Speed InteractionsShader motion accelerates on hover and spikes on click, creating responsive, physics-like feedback.
Ripple Feedback SystemClick interactions generate soft radial ripples, reinforcing user input with elegant motion.
3D Layered DepthBuilt with multiple visual layers to simulate elevation, press states, and physical interaction.
Dual Mode SupportSwitch seamlessly between text buttons and compact icon buttons.
Adaptive Lighting & Color ShiftsFine-tune red/blue shifts, softness, and wave repetition to craft unique surface behaviors.
Content & Layout
Text label or icon mode
Custom width & height
Border radius
Typography (full font control for text mode)
Shader Controls
Idle speed
Hover speed
Wave repetition
Surface softness
Red shift
Blue shift
Visual Styling
Surface gradient (top & bottom colors)
Content color (text/icon)
Depth and lighting feel
Interaction
Link support + open in new tab
Click/tap actions
Hover and press animations
Premium landing pages
SaaS hero sections
High-end product showcases
Creative portfolios
Web3 / AI / futuristic interfaces
Interactive storytelling experiences
Most buttons are static. Some are animated.This one is alive.
By combining real-time shaders, motion physics, and layered depth, this component creates an interaction that feels closer to a physical object than a UI element.
Launchly
