Frosted button
A pill button of thick frosted glass: heavy backdrop blur, fine grain, a lit edge and a soft sheen that follows the pointer.
What it is for
Primary calls to action over photos, gradients or video where an opaque button would feel heavy.
Pure CSS, no WebGL.
Use it
1 · site.json
"effects": { "components": ["frosted-button"] }or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components frosted-button2 · import it
import { FrostedButton } from '@/components/fx/ui';Files
components/fx/ui/FrostedButton.tsxcomponents/fx/ui/_tg-engine.tscomponents/fx/ui/_tg-use.tscomponents/fx/ui/_tg-stage.tsxcomponents/fx/ui/LICENSE-tactile-glass.txtcomponents/fx/ui/GlassButton.tsxui-glass-base.cssstylesui-glass-button.cssstyles
Source
Idea from Tactile Glass UI; the code is written for this kit.
Credits and licences: third-party notices.
Accessibility
- Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
- Reduced motion. With
prefers-reduced-motionon, animation settles to its finished state at once. - Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.