FrostedGlass Button

Liquid Glass Button brings the modern glass look to your site. It blurs and bends whatever sits behind it, so it looks best over gradients, photos and images.

• Glass: adjustable frost (blur), tint color and amount, edge thickness and shadow.

• Refraction: the edges bend the background like a real lens. This works in Chrome, Edge and Arc; Safari and Firefox show the same frosted glass without the bend.

• Light or dark: switch the surface style to match light or dark backgrounds.

• Hover: the button lifts slightly, a shine sweeps across it, and a soft glow follows the cursor. Each effect can be turned off.

• Press: a springy shrink when clicked, with adjustable press scale.

• Content: any label, full font controls, text color, and an optional icon (Chevron, Arrow, Arrow ↗ or Plus) on the left or right.

• Layout: radius, padding and gap. It sizes to its content by default, and fixed sizes work too.

• Ready for real use: link with an open-in-new-tab option, click interactions, a disabled state, a keyboard focus ring and reduced-motion support.