Back

Glossy Icon Buttons

Component Code (Next.js)

import GlossyIconButtonStack from "@/components/GlossyIconButtons";

export default function Example() {
  return <GlossyIconButtonStack />;
}

Claude / Codex Prompt

Create a set of three glossy, oversized icon buttons from the shared image:
- Purple rounded button with "Button" text and a right arrow icon.
- Black rounded button with a plus icon and "Button" text.
- Green rounded button with a save icon and "Button" text.
- Use real button elements, strong inset highlights, bottom depth shadows, accessible focus states, responsive sizing, and reduced-motion support.