A real iOS 26-style liquid glass button. Backdrop blur, specular sheen, inner stroke, optional SVG displacement bend. Every value is editor-controlled — shape, padding, font, tint, blur, shadow, hover state, liquid intensity.
Default Apple-style: fully rounded pill, label + chevron icon on the right, dropped on a dark cocktail photo. backdrop-filter: blur(24px) saturate(180%) + 12% white tint + 35% top sheen.
Same pill shape, no icon. Wider horizontal padding so the label has room to breathe. Higher blur (32px) for a softer, more diffused frost against the busy mountain backdrop.
16px radius rectangle with the icon on the left. UPPERCASE label with letter-spacing (Apple-app-store style). Heavy saturation boost (250%) makes the neon bleed through the glass.
shape: square gives 0px corners. Sat editorial straight on a magenta→indigo gradient. The specular sheen runs at a 200° angle (top-right) for a different reflection direction.
Set icon_position: only with shape: circle to get a round icon button. Useful for "play", "scroll down", or floating actions. Larger icon (28px) to fill the form.
Push the tint opacity up (35%) and use a brand color (vermillion #DA2916) to get a coloured glass. Looks like translucent stained glass over a dark stone wall.
Cranking the specular intensity to 75%, the inner stroke to 85% opacity, and using a dark label color creates a more chrome-mirror feel. Subtle drop shadow keeps it floating.
The chevron sits in a cream-filled circle badge to the right of the label, the way Apple does opt-in CTAs. On hover the badge nudges right and tilts — feels like a swipe affordance.
The button is built as a stack of layers, all rendered inside a single <a> tag. Each layer is configurable from the Style tab — nothing is hardcoded in CSS.
backdrop-filter: blur() saturate() brightness() against whatever is behind it.mix-blend-mode: screen for that lit-edge look.box-shadow, all five values exposed.Shape (pill/rounded/square/circle), corner radius, padding x & y, label font, label size, label weight, label case, letter-spacing, label color, icon size, icon color, icon-to-label gap.
Backdrop blur (px), saturation (%), brightness (%), tint color + opacity.
Specular intensity (0–100), specular color, sheen angle (deg), inner stroke color + opacity, inner stroke width (px).
Color + opacity, x offset, y offset, blur, spread — same shape as the rest of the shadow controls in the theme.
Hover scale, hover blur delta, hover tint overlay, transition duration.
Mode (off / subtle / full), turbulence frequency, displacement scale. Full adds an animated noise loop — drop it on a hero CTA, skip it on a button in a dense form.
For marketing pages: drop the button on an image, gradient, or solid colour so the glass has something to refract. Disable in production — the button is meant to sit on whatever's already behind it.
backdrop-filter works in all evergreen browsers. Safari renders the glass cleanest; Chrome/Firefox the blur is a touch flatter — that's a browser thing, not fixable. SVG displacement is supported everywhere but is GPU-heavy at Full mode — degrades gracefully if the user has prefers-reduced-motion set.