Glass button
controlsProA glass lens in a bevel that magnifies whatever sits behind it, with a pointer-following highlight and a one-pixel press.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
glass-button.tsxPro
The code is locked
Glass button is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
CLI
npx shadcn@latest add @manniche-pro/glass-buttonMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
GlassButtonProps
| Prop | Type | Default | What it does |
|---|---|---|---|
backdrop | ReactNode | – | What sits behind the button, drawn in currentColor. It shows round the button in the muted colour and again, magnified, inside the lens. Leave it out for plain glass. |
backdropClassName | string | – | Classes for the backdrop layer, which is absolutely positioned in the wrapper. |
containerClassName | string | – | Classes for the wrapper round the backdrop and the button, e.g. flex w-full justify-center to give the backdrop room. |
magnify | number | 1.3 | How much the lens magnifies the backdrop. |
Also takes every prop from ButtonHTMLAttributes<HTMLButtonElement>.
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.