{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"html-css-3d-pressed-button-with-solid-edge","type":"registry:component","title":"HTML CSS 3D Pressed Button With Solid Edge","description":"","dependencies":[],"files":[{"path":"components/we-inc/html-css-3d-pressed-button-with-solid-edge.tsx","type":"registry:component","content":"// Chunky 3D buttons: a solid bottom edge drawn with box-shadow that the face sinks into when pressed.\nconst buttons = [\n  { label: \"Check answer\", face: \"bg-lime-400 text-lime-950\", edge: \"#4d7c0f\" },\n  { label: \"Hint\", face: \"bg-white text-slate-800 border-2 border-slate-300\", edge: \"#cbd5e1\" },\n  { label: \"Skip\", face: \"bg-sky-500 text-white\", edge: \"#0369a1\" },\n];\n\nexport default function HtmlCss3dPressedButtonWithSolidEdge() {\n  return (\n    <section className=\"bg-sky-50 px-5 py-14\">\n      <style>{`\n        .hb4-btn { box-shadow: 0 6px 0 var(--edge); transform: translateY(0); transition: transform .08s ease-out, box-shadow .08s ease-out; }\n        .hb4-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 0 var(--edge); }\n        .hb4-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge); }\n        @media (prefers-reduced-motion: reduce) { .hb4-btn { transition: none; } }\n      `}</style>\n      <div className=\"mx-auto max-w-lg rounded-3xl bg-white p-6 text-center shadow-sm ring-1 ring-sky-100 sm:p-8\">\n        <p className=\"text-sm font-semibold text-sky-700\">Question 4 of 10</p>\n        <h2 className=\"mt-2 text-xl font-bold text-slate-900\">Which word means a small stream?</h2>\n        <p className=\"mt-2 text-sm text-slate-600\">Say it out loud, then press Check answer.</p>\n        <div className=\"mt-7 flex flex-wrap justify-center gap-4 pb-2\">\n          {buttons.map((b) => (\n            <button\n              key={b.label}\n              type=\"button\"\n              style={{ [\"--edge\" as string]: b.edge }}\n              className={`hb4-btn min-h-[52px] rounded-2xl px-6 text-base font-extrabold uppercase tracking-wide focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-sky-300 ${b.face}`}\n            >\n              {b.label}\n            </button>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"}]}