Comic Button

[{"id":"2f4c6c4c-6c35-44ac-8bf2-7a8ebfe3af4d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2e9d0039-17d8-4d7a-9163-b6aab9cb9448","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #ffffff;\\n --button-text: #111111;\\n --button-border: #111111;\\n --button-shadow: #111111;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: \\\"Arial Black\\\", Impact, Arial, Helvetica, sans-serif;\\n background:\\n radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px),\\n var(--page-bg);\\n background-size: 14px 14px;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.comic-button {\\n color: var(--button-text);\\n padding: 1em 3em;\\n border: 3px solid var(--button-border);\\n border-radius: 14px;\\n background: var(--button-bg);\\n box-shadow: 7px 7px 0 var(--button-shadow);\\n font-size: 1rem;\\n font-weight: 900;\\n letter-spacing: 0.08em;\\n text-transform: uppercase;\\n cursor: pointer;\\n outline: none;\\n transform: rotate(-1deg);\\n transition:\\n transform 120ms ease,\\n box-shadow 120ms ease,\\n background 120ms ease,\\n color 120ms ease;\\n}\\n\\n.comic-button:hover {\\n background: #111111;\\n color: #ffffff;\\n transform: rotate(1deg) translate(-2px, -2px);\\n box-shadow: 9px 9px 0 var(--button-shadow);\\n}\\n\\n.comic-button:active {\\n transform: rotate(0deg) translate(4px, 4px);\\n box-shadow: 3px 3px 0 var(--button-shadow);\\n}\\n\\n.comic-button:focus-visible {\\n outline: 3px dashed var(--button-border);\\n outline-offset: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .comic-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Comic Button\\n \\n \\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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"abca3ee6-fe39-4ee0-bd8f-ed4189165640","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d9db026d-c705-4477-9c84-371d40d6e717","type":"divider","props":{},"children":[]},{"id":"9a93af0a-e697-49fb-856b-ece45a4fd538","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"80e0a74f-d790-401e-9a25-90bd71e447a4","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9faa16d2-816f-4e3f-a0d7-ecd7bf089f86","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"40c8124f-d9e3-45b3-9bde-0b3ba517b7eb","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #ffffff;\\n --button-text: #111111;\\n --button-border: #111111;\\n --button-shadow: #111111;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: \\\"Arial Black\\\", Impact, Arial, Helvetica, sans-serif;\\n background:\\n radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px),\\n var(--page-bg);\\n background-size: 14px 14px;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.comic-button {\\n color: var(--button-text);\\n padding: 1em 3em;\\n border: 3px solid var(--button-border);\\n border-radius: 14px;\\n background: var(--button-bg);\\n box-shadow: 7px 7px 0 var(--button-shadow);\\n font-size: 1rem;\\n font-weight: 900;\\n letter-spacing: 0.08em;\\n text-transform: uppercase;\\n cursor: pointer;\\n outline: none;\\n transform: rotate(-1deg);\\n transition:\\n transform 120ms ease,\\n box-shadow 120ms ease,\\n background 120ms ease,\\n color 120ms ease;\\n}\\n\\n.comic-button:hover {\\n background: #111111;\\n color: #ffffff;\\n transform: rotate(1deg) translate(-2px, -2px);\\n box-shadow: 9px 9px 0 var(--button-shadow);\\n}\\n\\n.comic-button:active {\\n transform: rotate(0deg) translate(4px, 4px);\\n box-shadow: 3px 3px 0 var(--button-shadow);\\n}\\n\\n.comic-button:focus-visible {\\n outline: 3px dashed var(--button-border);\\n outline-offset: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .comic-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"042a62a3-d694-45c1-97c3-649db66147d2","type":"divider","props":{},"children":[]},{"id":"8e932ccf-cac7-474e-9982-d254124ab576","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"20396fe2-cbfe-4004-94bf-724d16471295","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"1bcb529b-3de8-45f5-badc-1295162ee094","type":"procode","props":{"code":"

\n \n

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

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd7d0253-37b9-4224-840d-e92343b16aa0","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":" element is only used to center the button on the screen.","styles":{}}],"children":[]},{"id":"8ff3005b-1ec4-40f7-898e-f5e0fe460507","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".comic-button","styles":{"code":true}},{"type":"text","text":" is the main component.","styles":{}}],"children":[]},{"id":"2ecbd6e1-4292-43a4-9db1-556e97c46395","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"652e7642-a4c7-4128-9b55-543021c29465","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color setup\nThe component uses CSS variables from ","styles":{}},{"type":"text","text":":root","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1e69a073-74d7-4eb3-8d66-79b211852f39","type":"procode","props":{"code":":root {\n --page-bg: #ffffff;\n --button-bg: #ffffff;\n --button-text: #111111;\n --button-border: #111111;\n --button-shadow: #111111;\n}","language":"javascript","filename":"","files":"[{\"id\":\"64fjdwx03\",\"name\":\"code\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #ffffff;\\n --button-text: #111111;\\n --button-border: #111111;\\n --button-shadow: #111111;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c262ac08-7de5-416e-b943-916d74ea645f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button easy to control without changing many lines. The whole design is black and white.","styles":{}}],"children":[]},{"id":"d8f96783-f17e-48a0-9a9a-3013558b6a3f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Global reset\n\nThe universal selector keeps sizing predictable.","styles":{}}],"children":[]},{"id":"37a90ba0-4365-48ac-b477-0687f4cde166","type":"procode","props":{"code":"* {\n box-sizing: border-box;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dqojmbe9w\",\"name\":\"code\",\"code\":\"* {\\n box-sizing: border-box;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6b7db1e5-1b00-40f0-8263-f1bf20de8b12","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Page background\n\nThe body uses a white background with a small halftone comic dot pattern.","styles":{}}],"children":[]},{"id":"b5ad63a8-1393-49e5-9071-7bfb2f7e9d08","type":"procode","props":{"code":"background:\n radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px),\n var(--page-bg);\nbackground-size: 14px 14px;","language":"javascript","filename":"","files":"[{\"id\":\"q48zo4s0p\",\"name\":\"code\",\"code\":\"background:\\n radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px),\\n var(--page-bg);\\nbackground-size: 14px 14px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d586e631-2082-487c-9ff7-caf6c230c73d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This gives the page a comic-style paper texture without using an image.","styles":{}}],"children":[]},{"id":"b8e9a8f6-9a94-44b9-abdc-05ea17cc4a5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe button is centered using CSS Grid.","styles":{}}],"children":[]},{"id":"674f5839-178b-440f-a253-387731754ab9","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"eu3gc5ns1\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7d623647-f6ea-4bc1-9e24-f938fcd44153","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button base style\n\nThe button uses a thick black border, white background, bold text, and a hard black shadow.","styles":{}}],"children":[]},{"id":"750b22c3-de0c-4791-ba6f-15e60afda4f8","type":"procode","props":{"code":".comic-button {\n color: var(--button-text);\n padding: 1em 3em;\n border: 3px solid var(--button-border);\n border-radius: 14px;\n background: var(--button-bg);\n box-shadow: 7px 7px 0 var(--button-shadow);\n}","language":"javascript","filename":"","files":"[{\"id\":\"kjzm66ze1\",\"name\":\"code\",\"code\":\".comic-button {\\n color: var(--button-text);\\n padding: 1em 3em;\\n border: 3px solid var(--button-border);\\n border-radius: 14px;\\n background: var(--button-bg);\\n box-shadow: 7px 7px 0 var(--button-shadow);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63ef2d34-53cd-4047-a478-939650434262","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The shadow has no blur, so it feels like a comic cutout or sticker.","styles":{}}],"children":[]},{"id":"8dc2abde-d28a-44d5-957c-dca60877f665","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Comic feeling\n\nThe button is slightly rotated by default.","styles":{}}],"children":[]},{"id":"22c33948-8565-4b02-9688-673b3e4d2404","type":"procode","props":{"code":"transform: rotate(-1deg);","language":"javascript","filename":"","files":"[{\"id\":\"at43w8lzx\",\"name\":\"code\",\"code\":\"transform: rotate(-1deg);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d368426-0a93-491e-ac13-68dbbc12f5bd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes it feel less clean and more hand-drawn/comic.","styles":{}}],"children":[]},{"id":"952fe488-b89d-4702-a760-f3a08cba7160","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover flow\n\nWhen hovered, the button becomes black, the text becomes white, the button moves slightly upward/left, and the shadow becomes bigger.","styles":{}}],"children":[]},{"id":"c49c6ad5-2604-45b8-ba6e-6e33248b29c2","type":"procode","props":{"code":".comic-button:hover {\n background: #111111;\n color: #ffffff;\n transform: rotate(1deg) translate(-2px, -2px);\n box-shadow: 9px 9px 0 var(--button-shadow);\n}","language":"javascript","filename":"","files":"[{\"id\":\"uvavqo18z\",\"name\":\"code\",\"code\":\".comic-button:hover {\\n background: #111111;\\n color: #ffffff;\\n transform: rotate(1deg) translate(-2px, -2px);\\n box-shadow: 9px 9px 0 var(--button-shadow);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de8c5993-e110-41f0-a370-ac1095d345da","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the feeling that the button is popping out.","styles":{}}],"children":[]},{"id":"2aec51e3-2f8c-4c4d-979e-0b86d24df407","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Click flow\n\nWhen clicked, the button moves down/right and the shadow becomes smaller.","styles":{}}],"children":[]},{"id":"ebc09493-bae6-40ad-8a25-518377e90d04","type":"procode","props":{"code":".comic-button:active {\n transform: rotate(0deg) translate(4px, 4px);\n box-shadow: 3px 3px 0 var(--button-shadow);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rfflnkvb7\",\"name\":\"code\",\"code\":\".comic-button:active {\\n transform: rotate(0deg) translate(4px, 4px);\\n box-shadow: 3px 3px 0 var(--button-shadow);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2a85df8-ce86-4daa-9156-f592b060d548","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button feel pressed into the page.","styles":{}}],"children":[]},{"id":"962b8ea7-b63c-4d7d-bce8-26804b13a5cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus flow\n\nKeyboard users get a visible dashed outline.","styles":{}}],"children":[]},{"id":"62d8249c-b903-494c-9fce-6c6d093b670b","type":"procode","props":{"code":".comic-button:focus-visible {\n outline: 3px dashed var(--button-border);\n outline-offset: 8px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lbxmx0cts\",\"name\":\"code\",\"code\":\".comic-button:focus-visible {\\n outline: 3px dashed var(--button-border);\\n outline-offset: 8px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9de3f692-2e4c-414b-b1fd-b83eb8c2b3af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This keeps the component accessible.","styles":{}}],"children":[]},{"id":"31b5083d-0e11-4195-89e2-418e2ccfae1a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Motion flow\n\nThe button has a short transition.","styles":{}}],"children":[]},{"id":"791f666a-1237-4cb8-a133-d23a1d5102c1","type":"procode","props":{"code":"transition:\n transform 120ms ease,\n box-shadow 120ms ease,\n background 120ms ease,\n color 120ms ease;","language":"javascript","filename":"","files":"[{\"id\":\"7s1gipna2\",\"name\":\"code\",\"code\":\"transition:\\n transform 120ms ease,\\n box-shadow 120ms ease,\\n background 120ms ease,\\n color 120ms ease;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e793b0f8-a1f4-4a02-9cd1-96ba45e59795","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The animation only affects transform, shadow, background, and text color.","styles":{}}],"children":[]},{"id":"c9534a8a-9bd3-489c-88a5-a26c4e4436f0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced motion\n\nIf the user prefers reduced motion, the transition is removed.","styles":{}}],"children":[]},{"id":"3cec64c4-4e42-424e-aa4d-1c0187d7fb2e","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .comic-button {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"b759fq7b3\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .comic-button {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8d07b3ac-95be-43d4-a101-9fc3900d7346","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]