AppleLiquidButton
Recreate Apple's Liquid Glass effect with authentic backdrop filters, 20+ icons, chromatic aberration, interactive states, and customizable typography. Modern premium button.
Make it with Workshop
Build your own component with AI
Recreate Apple's Liquid Glass effect with authentic backdrop filters, 20+ icons, chromatic aberration, interactive states, and customizable typography. Modern premium button.
Make it with Workshop
Build your own component with AI
Liquid Glass Button
Recreate Apple's stunning Liquid Glass interface from macOS Tahoe and iOS 26 with this premium button component. Featuring authentic glass morphism effects including dynamic refraction, chromatic aberration, and multi-layered lighting that perfectly mimics real glass materials.
Key Features:
20+ Built-in Icons - Curated icon library with flexible positioning (left, right, top, bottom)
Advanced Glass Effects - Authentic backdrop filters with saturation, brightness, and blur controls
Apple-Accurate Lighting - Multi-directional highlights and curved reflections matching Apple's design system
Interactive States - Smooth hover and press animations with ripple effects
Chromatic Aberration - Subtle color separation for realistic glass physics
Full Typography Control - Complete text styling with custom fonts, weights, and spacing
Responsive Design - Auto-sizing with customizable padding and corner radius
Performance Optimized - Lightweight SVG icons with smooth 60fps animations
Perfect for modern interfaces, dashboards, hero sections, and any design requiring Apple's signature translucent aesthetic. The component automatically adapts to light and dark backgrounds, ensuring perfect visibility in any context.
What's Included:
Complete code component ready for Framer
Comprehensive property controls for easy customization
Built-in icon library (expandable)
Multiple glass effect presets
Responsive sizing options
Transform your designs with the same liquid glass effect that defines Apple's latest interface language. No external dependencies required - simply drop into your Framer project and customize to match your brand.
