← Back to Gallery
Aurora Mesh Liquid Button
Live Preview
A high-end, production-ready call-to-action button featuring a dynamic 'gradient mesh' background. The design utilizes layered radial gradients with CSS animations and a heavy blur filter to create a fluid, organic color shifting effect. This component is built with responsiveness in mind, ensuring a tactile and visually engaging experience on both mobile and desktop without any JavaScript overhead.
Features
- Dynamic CSS-only Mesh Animation
- High-Performance Layered Radial Gradients
- Glassmorphism Overlay for text legibility
- Smooth Bezier-curve micro-interactions
- Fully responsive and touch-friendly sizing
- Accessible focus and active states
Uses
- Premium SaaS landing pages
- Creative agency 'Hire Us' buttons
- Gaming platform call-to-actions
- Modern portfolio hero sections
- Digital product launch pages
Benefits
- Zero JS dependencies for faster TTI
- Highly customizable color palette
- Modern aesthetic that builds brand authority
- Smooth 60fps animations via GPU acceleration
Techniques Used
Multiple radial-gradients, CSS Keyframes (drift), Filter: blur(), Backdrop-filter, Pseudo-element layering, Flexbox centering.
Frequently Asked Questions
How does the Aurora Mesh Liquid Button optimize rendering performance when using heavy filter: blur() and will-change properties on the animating layers?
To prevent frame drops, the component utilizes will-change: transform and opacity on the underlying gradient divs. By isolating the blur effect to a container with overflow: hidden and using GPU-accelerated transforms rather than animating the filter property itself, it maintains a consistent 60fps even on lower-power mobile devices.
How is the glassmorphism overlay configured to maintain WCAG text legibility against high-saturation radial gradients?
The component applies a semi-transparent backdrop-filter: blur(12px) combined with a subtle rgba(255, 255, 255, 0.05) tint. This creates a refractive layer that diffuses the underlying mesh colors, ensuring the foreground text maintains a high contrast ratio and readable edges regardless of the dynamic gradient positions.
What specific CSS properties are modulated to create the liquid movement effect without relying on Canvas or JavaScript?
The liquid effect is achieved by animating background-position and background-size across four distinct radial-gradient layers. By using staggered @keyframes with infinite alternate durations and unique cubic-bezier(0.44, 0, 0.56, 1) timing functions, the layers appear to merge and flow around each other organically.
How can the Bezier-curve micro-interactions be adjusted to simulate a heavy liquid vs. a gaseous aurora transition?
Users can modify the --button-ease-profile variable. A heavy liquid feel is achieved with a more pronounced ease-in-out curve like cubic-bezier(0.68, -0.6, 0.32, 1.6), while a gaseous effect is better served by a longer duration ease-in with a higher filter: blur() value and lower opacity stops in the keyframe sequence.
How does the component handle the transition from a hover-state mesh animation to a tactile :active press state for touch-first interfaces?
On the :active trigger, the component executes a rapid transform: scale(0.97) and increases the filter: brightness(1.15) on the mesh layer. This provides immediate visual feedback, while a secondary ::after pseudo-element expands a radial masking pulse to mimic a physical liquid ripple emanating from the center of the button.