Pressed Standard Button

[{"id":"43075da2-0537-4103-b323-7a81f80b4201","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a250537b-1394-4da1-90e4-5c26b888b44c","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n\\n --button-base: #9b5de5;\\n --button-surface: #f8f3ff;\\n --button-border: #494a4b;\\n --button-text: #202124;\\n --button-shadow: #494a4b;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: var(--page-bg);\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.paper-button {\\n width: 150px;\\n padding: 0;\\n padding-bottom: 3px;\\n border: none;\\n border-radius: 5px;\\n\\n background-color: var(--button-base);\\n box-shadow: 0 2px 0 var(--button-shadow);\\n\\n font-family: Arial, Helvetica, sans-serif;\\n font-size: 15px;\\n font-weight: 700;\\n text-decoration: none;\\n\\n cursor: pointer;\\n transform: rotate(5deg);\\n transform-origin: center;\\n\\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\\n}\\n\\n.paper-button span {\\n display: block;\\n padding: 0.5rem 1rem;\\n\\n color: var(--button-text);\\n background: var(--button-surface);\\n\\n border: 2px solid var(--button-border);\\n border-radius: 5px;\\n}\\n\\n.paper-button:hover {\\n transform: rotate(3deg) translateY(-1px);\\n}\\n\\n.paper-button:active {\\n padding-bottom: 0;\\n box-shadow: 0 0 0 var(--button-shadow);\\n transform: translateY(5px);\\n outline: 0;\\n}\\n\\n.paper-button:focus-visible {\\n outline: 3px solid rgba(155, 93, 229, 0.35);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .paper-button {\\n transition: none;\\n }\\n\\n .paper-button:hover,\\n .paper-button:active {\\n transform: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Pressed Standard Button\\n \\n \\n \\n

\\n \\n

\\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"a98b9225-8c25-432b-9802-c653a8a9118f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"26859a54-f8f4-4b2c-9e2c-e14555dea451","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af0880f7-b786-460f-8589-a436b6da2ba7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"22ed884a-efb3-4466-8c62-1460804ca339","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n\\n --button-base: #9b5de5;\\n --button-surface: #f8f3ff;\\n --button-border: #494a4b;\\n --button-text: #202124;\\n --button-shadow: #494a4b;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: var(--page-bg);\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.paper-button {\\n width: 150px;\\n padding: 0;\\n padding-bottom: 3px;\\n border: none;\\n border-radius: 5px;\\n\\n background-color: var(--button-base);\\n box-shadow: 0 2px 0 var(--button-shadow);\\n\\n font-family: Arial, Helvetica, sans-serif;\\n font-size: 15px;\\n font-weight: 700;\\n text-decoration: none;\\n\\n cursor: pointer;\\n transform: rotate(5deg);\\n transform-origin: center;\\n\\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\\n}\\n\\n.paper-button span {\\n display: block;\\n padding: 0.5rem 1rem;\\n\\n color: var(--button-text);\\n background: var(--button-surface);\\n\\n border: 2px solid var(--button-border);\\n border-radius: 5px;\\n}\\n\\n.paper-button:hover {\\n transform: rotate(3deg) translateY(-1px);\\n}\\n\\n.paper-button:active {\\n padding-bottom: 0;\\n box-shadow: 0 0 0 var(--button-shadow);\\n transform: translateY(5px);\\n outline: 0;\\n}\\n\\n.paper-button:focus-visible {\\n outline: 3px solid rgba(155, 93, 229, 0.35);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .paper-button {\\n transition: none;\\n }\\n\\n .paper-button:hover,\\n .paper-button:active {\\n transform: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69e1e03a-cfa5-483a-bbb4-80de781b0ced","type":"divider","props":{},"children":[]},{"id":"0d4decc6-8d13-4dfc-8342-3f608a475640","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"894cff57-23e6-4b9e-8597-605cdc626213","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"553d8ed8-6b6d-4e5b-8ebc-647f05d46e5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Structure","styles":{}}],"children":[]},{"id":"3369bfd6-6a9d-4437-a620-6eaa775bb762","type":"procode","props":{"code":"

\n \n

","language":"javascript","filename":"","files":"[{\"id\":\"pkq2hv4h9\",\"name\":\"code\",\"code\":\"

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f1cc729-b6a3-425e-9131-bf35b40083fe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The HTML uses one button and one inner ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"7326e0fd-7f4c-40c0-9dbb-92d91e511859","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The outer ","styles":{}},{"type":"text","text":".paper-button","styles":{"code":true}},{"type":"text","text":" acts as the purple base layer.\n\nThe inner ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" acts as the white top surface of the button.","styles":{}}],"children":[]},{"id":"906f9176-c530-4e06-944e-5e409c61832e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This separation is important because the button needs to look layered. The purple part is underneath, while the white part is the clickable surface.","styles":{}}],"children":[]},{"id":"1fc97b98-22e8-471f-b000-67e6dc9e0e79","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color System","styles":{}}],"children":[]},{"id":"e294e9c6-9afd-40cb-bb83-c48c69fe6e48","type":"procode","props":{"code":":root {\n --page-bg: #ffffff;\n\n --button-base: #9b5de5;\n --button-surface: #f8f3ff;\n --button-border: #494a4b;\n --button-text: #202124;\n --button-shadow: #494a4b;\n}","language":"javascript","filename":"","files":"[{\"id\":\"12x4kvzm1\",\"name\":\"code\",\"code\":\":root {\\n --page-bg: #ffffff;\\n\\n --button-base: #9b5de5;\\n --button-surface: #f8f3ff;\\n --button-border: #494a4b;\\n --button-text: #202124;\\n --button-shadow: #494a4b;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"701af8c2-03ae-403c-b568-93c9ca264ded","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The colors are stored in CSS variables so the component is easier to maintain.","styles":{}}],"children":[]},{"id":"c2241902-fa92-4084-a278-84a47ffff743","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"--button-base","styles":{"code":true}},{"type":"text","text":" controls the purple bottom layer.\n\n","styles":{}},{"type":"text","text":"--button-surface","styles":{"code":true}},{"type":"text","text":" controls the light top surface.\n\n","styles":{}},{"type":"text","text":"--button-border","styles":{"code":true}},{"type":"text","text":" controls the outline around the top layer.\n\n","styles":{}},{"type":"text","text":"--button-shadow","styles":{"code":true}},{"type":"text","text":" controls the small dark shadow below the button.","styles":{}}],"children":[]},{"id":"7203caab-1a30-4a14-919e-68262db8106a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"ff1eb602-a1ac-4c83-8fbf-99aa5903a04b","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7vmu0ksiz\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae774996-137f-491e-a87c-519af5d922c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper centers the button in the screen.\n\n","styles":{}},{"type":"text","text":"min-height: 100vh","styles":{"code":true}},{"type":"text","text":" makes the page full height.\n\n","styles":{}},{"type":"text","text":"place-items: center","styles":{"code":true}},{"type":"text","text":" centers the button vertically and horizontally.","styles":{}}],"children":[]},{"id":"817ff44d-b5f9-4c1f-983b-b793421d1ec1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Outer Button Layer","styles":{}}],"children":[]},{"id":"b8ddebf0-2e24-44e4-be2c-2d95b121632a","type":"procode","props":{"code":".paper-button {\n width: 150px;\n padding: 0;\n padding-bottom: 3px;\n border: none;\n border-radius: 5px;\n background-color: var(--button-base);\n box-shadow: 0 2px 0 var(--button-shadow);\n}","language":"javascript","filename":"","files":"[{\"id\":\"aj32j4cv7\",\"name\":\"code\",\"code\":\".paper-button {\\n width: 150px;\\n padding: 0;\\n padding-bottom: 3px;\\n border: none;\\n border-radius: 5px;\\n background-color: var(--button-base);\\n box-shadow: 0 2px 0 var(--button-shadow);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"212d3229-ff99-4208-8d04-8d38e54e0e55","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The outer button creates the purple base.","styles":{}}],"children":[]},{"id":"d22c3941-138b-4c3c-8740-0deeb3099d3d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"padding-bottom: 3px","styles":{"code":true}},{"type":"text","text":" creates the visible lower purple layer.\n\nThe ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":" adds a small dark shadow, making the button feel slightly raised.","styles":{}}],"children":[]},{"id":"c355afdf-8eaf-4c36-86d8-87c841eed763","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Inner Surface","styles":{}}],"children":[]},{"id":"fef8a417-7546-49e3-9ef1-9bd9a37ff005","type":"procode","props":{"code":".paper-button span {\n display: block;\n padding: 0.5rem 1rem;\n color: var(--button-text);\n background: var(--button-surface);\n border: 2px solid var(--button-border);\n border-radius: 5px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bbst933k3\",\"name\":\"code\",\"code\":\".paper-button span {\\n display: block;\\n padding: 0.5rem 1rem;\\n color: var(--button-text);\\n background: var(--button-surface);\\n border: 2px solid var(--button-border);\\n border-radius: 5px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4dc0c1ea-1e22-4588-9101-47611d001f74","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" creates the top surface.","styles":{}}],"children":[]},{"id":"e8e8f7c2-2fbd-4c64-97b1-8b7d0ea840ea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It has the white/purple-tinted background, text color, border, and rounded corners. Because the ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" is inside the button, it sits above the purple base.","styles":{}}],"children":[]},{"id":"6585b5b3-a6ac-4b96-8663-ac8ca3329706","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default State","styles":{}}],"children":[]},{"id":"172a289c-0e65-4fb9-8468-ab9457f89ce5","type":"procode","props":{"code":".paper-button {\n transform: rotate(5deg);\n transform-origin: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mt5018mb1\",\"name\":\"code\",\"code\":\".paper-button {\\n transform: rotate(5deg);\\n transform-origin: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b37a338d-fb88-4858-aca6-5d28980bdcf6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button starts slightly rotated. This gives the component a playful, handmade look.","styles":{}}],"children":[]},{"id":"11e2ec9e-a270-499d-9f9d-5089fa497815","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow","styles":{}}],"children":[]},{"id":"0ea88c38-010f-42c6-b718-ee057d92e75a","type":"procode","props":{"code":".paper-button:hover {\n transform: rotate(3deg) translateY(-1px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"nxgy5mp6x\",\"name\":\"code\",\"code\":\".paper-button:hover {\\n transform: rotate(3deg) translateY(-1px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec81516c-203b-4791-ab1f-bc1fbdb35e38","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the user hovers, the button rotates slightly closer to normal and moves up a little.","styles":{}}],"children":[]},{"id":"893bf337-593e-43ab-b09b-d9aacafe6de9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button feel interactive before the user clicks.","styles":{}}],"children":[]},{"id":"e82a65b3-ec20-4512-891d-f2a9e30e760c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Press Flow","styles":{}}],"children":[]},{"id":"c79cc38b-3ea8-4b5f-b6f8-a7e689a21682","type":"procode","props":{"code":".paper-button:active {\n padding-bottom: 0;\n box-shadow: 0 0 0 var(--button-shadow);\n transform: translateY(5px);\n outline: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ng6rv41gj\",\"name\":\"code\",\"code\":\".paper-button:active {\\n padding-bottom: 0;\\n box-shadow: 0 0 0 var(--button-shadow);\\n transform: translateY(5px);\\n outline: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1305a724-58d5-478a-93e6-8eade07b0f50","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the button is clicked, three things happen:","styles":{}}],"children":[]},{"id":"2389263e-38d3-4094-a3a1-f8c193421d71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The bottom padding becomes ","styles":{}},{"type":"text","text":"0","styles":{"code":true}},{"type":"text","text":", so the purple depth collapses.\n\nThe shadow becomes invisible.\n\nThe whole button moves down with ","styles":{}},{"type":"text","text":"translateY(5px)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3685c47a-0a6f-4566-86b0-420d720eabe8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the pressed-button effect.","styles":{}}],"children":[]},{"id":"bc6cc800-8081-4539-afe7-80f415e529c5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus State","styles":{}}],"children":[]},{"id":"6a122433-08d3-4e0c-910c-c183241fc06e","type":"procode","props":{"code":".paper-button:focus-visible {\n outline: 3px solid rgba(155, 93, 229, 0.35);\n outline-offset: 6px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"08ttfxofi\",\"name\":\"code\",\"code\":\".paper-button:focus-visible {\\n outline: 3px solid rgba(155, 93, 229, 0.35);\\n outline-offset: 6px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"20154e0c-d6c7-44ef-b9b1-750fe119784b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This improves keyboard accessibility.\n\nWhen the button is focused using keyboard navigation, a soft purple outline appears around it.","styles":{}}],"children":[]},{"id":"416a9562-d99c-44f8-b661-b8db718e1c0a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"51b25272-3dd0-48cf-959f-dea5f34ec85b","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .paper-button {\n transition: none;\n }\n\n .paper-button:hover,\n .paper-button:active {\n transform: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"abkhqilib\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .paper-button {\\n transition: none;\\n }\\n\\n .paper-button:hover,\\n .paper-button:active {\\n transform: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3936d24b-ffc4-4a56-af3e-f7d1f908e7ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This respects users who prefer reduced motion.\n\nThe button still works, but the movement animation is removed.","styles":{}}],"children":[]},{"id":"8ef25c50-7cc2-4900-9ddb-977c106db452","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]