# Glassy Checkout Buttons

Checkout button variants with glassy surfaces and lightweight press states.

## Artifact

- ID: shop-glassy-buttons
- Runtime: React
- Preview: Compiled React preview
- Manifest schema: 1
- Packages: None
- Tags: #button, #checkout, #css-modules, #react, #zero-extra-packages, #reduced-motion
- Source: /components/shop-glassy-buttons/code
- Manifest: /components/shop-glassy-buttons/manifest
- Preview route: /components/shop-glassy-buttons/react-preview
- Download: /components/shop-glassy-buttons/download

## Files

- examples/glassy-button-preview.tsx (tsx, 612 bytes, sha256 714469b6574c2975e93c03702671a6936e164ab8392c68eeb42daf05e9eed54d)
- components/shop-glassy-button.tsx (tsx, 859 bytes, sha256 fafcfb04d0482667e7e0fe9168f12cab4dc50e6243a6ae24225007a419cb150c)
- components/shop-glassy-button.module.css (css, 3833 bytes, sha256 92903c0a33a30be27fa5a7a72d71f4ded5813e79ba7d2b528c9b0743e3899a47)

## Assets

- None

## Integration Steps

1. Copy the files listed below into your React app.
2. Keep CSS Module files beside the TSX files that import them.
3. Preserve the relative paths between `components/shop-glassy-button.tsx`, `components/shop-glassy-button.module.css`.
4. Start from `examples/glassy-button-preview.tsx` to see the intended composition.
5. Move any `public/` assets into your app public directory at the same path, or update the asset URLs.

## Motion And Performance

- Motion types: transition
- Animated properties: transform, opacity, filter, background-color
- Reduced motion: yes
- Pressed affordances use transform, filter, and opacity without layout work.
- The preview script only toggles data/ARIA state for interaction.