Text Shadow Button

[{"id":"a5d711de-8be0-4a68-a48f-3d1f18b6bd05","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"543a4f18-6a22-42da-8bc2-eeb039f4acc3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.button-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.depth-button {\\n border: none;\\n outline: none;\\n cursor: pointer;\\n padding: 10px 20px;\\n background: transparent;\\n font-size: 2em;\\n transition: transform 0.2s ease-out;\\n}\\n\\n.depth-button__text {\\n display: inline-block;\\n color: #131313;\\n background: #fff;\\n letter-spacing: 0.15em;\\n font-weight: 700;\\n line-height: 1;\\n transition:\\n text-shadow 0.2s ease-out,\\n transform 0.2s ease-out;\\n text-shadow:\\n 1px -1px 0 #767676,\\n -1px 2px 1px #737272,\\n -2px 4px 1px #767474,\\n -3px 6px 1px #787777,\\n -4px 8px 1px #7b7a7a,\\n -5px 10px 1px #7f7d7d,\\n -6px 12px 1px #828181,\\n -7px 14px 1px #868585,\\n -8px 16px 1px #8b8a89,\\n -9px 18px 1px #8f8e8d,\\n -10px 20px 1px #949392,\\n -11px 22px 1px #999897,\\n -12px 24px 1px #9e9c9c,\\n -13px 26px 1px #a3a1a1,\\n -14px 28px 1px #a8a6a6,\\n -15px 30px 1px #adabab,\\n -16px 32px 1px #b2b1b0,\\n -17px 34px 1px #b7b6b5,\\n -18px 36px 1px #bcbbba,\\n -19px 38px 1px #c1bfbf,\\n -20px 40px 1px #c6c4c4,\\n -21px 42px 1px #cbc9c8,\\n -22px 44px 1px #cfcdcd,\\n -23px 46px 1px #d4d2d1,\\n -24px 48px 1px #d8d6d5,\\n -25px 50px 1px #dbdad9,\\n -26px 52px 1px #dfdddc,\\n -27px 54px 1px #e2e0df,\\n -28px 56px 1px #e4e3e2;\\n}\\n\\n.depth-button:hover .depth-button__text {\\n text-shadow:\\n -1px -1px 0 #767676,\\n 1px 2px 1px #737272,\\n 2px 4px 1px #767474,\\n 3px 6px 1px #787777,\\n 4px 8px 1px #7b7a7a,\\n 5px 10px 1px #7f7d7d,\\n 6px 12px 1px #828181,\\n 7px 14px 1px #868585,\\n 8px 16px 1px #8b8a89,\\n 9px 18px 1px #8f8e8d,\\n 10px 20px 1px #949392,\\n 11px 22px 1px #999897,\\n 12px 24px 1px #9e9c9c,\\n 13px 26px 1px #a3a1a1,\\n 14px 28px 1px #a8a6a6,\\n 15px 30px 1px #adabab,\\n 16px 32px 1px #b2b1b0,\\n 17px 34px 1px #b7b6b5,\\n 18px 36px 1px #bcbbba,\\n 19px 38px 1px #c1bfbf,\\n 20px 40px 1px #c6c4c4,\\n 21px 42px 1px #cbc9c8,\\n 22px 44px 1px #cfcdcd,\\n 23px 46px 1px #d4d2d1,\\n 24px 48px 1px #d8d6d5,\\n 25px 50px 1px #dbdad9,\\n 26px 52px 1px #dfdddc,\\n 27px 54px 1px #e2e0df,\\n 28px 56px 1px #e4e3e2;\\n}\\n\\n.depth-button:active {\\n transform: scale(0.96);\\n}\\n\\n.depth-button:active .depth-button__text {\\n text-shadow: none;\\n}\\n\\n.depth-button:focus-visible {\\n outline: 3px solid #767676;\\n outline-offset: 8px;\\n border-radius: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .depth-button,\\n .depth-button__text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Text Shadow 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":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"f165bd44-d637-4797-a388-0b46967860b3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"056765b0-4ad4-4467-98ba-b14fdc30d69e","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\\n\\n \\n \",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"32029b19-e712-4e37-bf54-dc19b11dfd62","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"d526c437-33ef-46ff-85f8-9dfbd7ed4f40","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.button-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.depth-button {\\n border: none;\\n outline: none;\\n cursor: pointer;\\n padding: 10px 20px;\\n background: transparent;\\n font-size: 2em;\\n transition: transform 0.2s ease-out;\\n}\\n\\n.depth-button__text {\\n display: inline-block;\\n color: #131313;\\n background: #fff;\\n letter-spacing: 0.15em;\\n font-weight: 700;\\n line-height: 1;\\n transition:\\n text-shadow 0.2s ease-out,\\n transform 0.2s ease-out;\\n text-shadow:\\n 1px -1px 0 #767676,\\n -1px 2px 1px #737272,\\n -2px 4px 1px #767474,\\n -3px 6px 1px #787777,\\n -4px 8px 1px #7b7a7a,\\n -5px 10px 1px #7f7d7d,\\n -6px 12px 1px #828181,\\n -7px 14px 1px #868585,\\n -8px 16px 1px #8b8a89,\\n -9px 18px 1px #8f8e8d,\\n -10px 20px 1px #949392,\\n -11px 22px 1px #999897,\\n -12px 24px 1px #9e9c9c,\\n -13px 26px 1px #a3a1a1,\\n -14px 28px 1px #a8a6a6,\\n -15px 30px 1px #adabab,\\n -16px 32px 1px #b2b1b0,\\n -17px 34px 1px #b7b6b5,\\n -18px 36px 1px #bcbbba,\\n -19px 38px 1px #c1bfbf,\\n -20px 40px 1px #c6c4c4,\\n -21px 42px 1px #cbc9c8,\\n -22px 44px 1px #cfcdcd,\\n -23px 46px 1px #d4d2d1,\\n -24px 48px 1px #d8d6d5,\\n -25px 50px 1px #dbdad9,\\n -26px 52px 1px #dfdddc,\\n -27px 54px 1px #e2e0df,\\n -28px 56px 1px #e4e3e2;\\n}\\n\\n.depth-button:hover .depth-button__text {\\n text-shadow:\\n -1px -1px 0 #767676,\\n 1px 2px 1px #737272,\\n 2px 4px 1px #767474,\\n 3px 6px 1px #787777,\\n 4px 8px 1px #7b7a7a,\\n 5px 10px 1px #7f7d7d,\\n 6px 12px 1px #828181,\\n 7px 14px 1px #868585,\\n 8px 16px 1px #8b8a89,\\n 9px 18px 1px #8f8e8d,\\n 10px 20px 1px #949392,\\n 11px 22px 1px #999897,\\n 12px 24px 1px #9e9c9c,\\n 13px 26px 1px #a3a1a1,\\n 14px 28px 1px #a8a6a6,\\n 15px 30px 1px #adabab,\\n 16px 32px 1px #b2b1b0,\\n 17px 34px 1px #b7b6b5,\\n 18px 36px 1px #bcbbba,\\n 19px 38px 1px #c1bfbf,\\n 20px 40px 1px #c6c4c4,\\n 21px 42px 1px #cbc9c8,\\n 22px 44px 1px #cfcdcd,\\n 23px 46px 1px #d4d2d1,\\n 24px 48px 1px #d8d6d5,\\n 25px 50px 1px #dbdad9,\\n 26px 52px 1px #dfdddc,\\n 27px 54px 1px #e2e0df,\\n 28px 56px 1px #e4e3e2;\\n}\\n\\n.depth-button:active {\\n transform: scale(0.96);\\n}\\n\\n.depth-button:active .depth-button__text {\\n text-shadow: none;\\n}\\n\\n.depth-button:focus-visible {\\n outline: 3px solid #767676;\\n outline-offset: 8px;\\n border-radius: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .depth-button,\\n .depth-button__text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"475c2379-5b89-4f5e-b1e2-0915ade61416","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"21b19ff5-7e43-4eca-afaa-39c97b156236","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2c5338fd-1b1e-400f-a1cf-08afedb6a73b","type":"divider","props":{},"children":[]},{"id":"37422dca-d1c1-4157-a470-afb0b1b1d20a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"6e440168-7b26-4320-9516-30312335dd65","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":" file is the main page. It loads the stylesheet first, then renders one centered button inside the main wrapper.","styles":{}}],"children":[]},{"id":"e9388485-a072-48c6-950e-f0a4659ed8d6","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"ztvbhzi0j\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c02a585-5e8b-498b-a65a-2780eeaa264b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The main wrapper is:","styles":{}}],"children":[]},{"id":"8a4b0b52-8859-4d2b-8aca-5e01e48b6e7e","type":"procode","props":{"code":"

\n \n

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

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f92cacd7-085e-47e0-b670-24ece6c7b2c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses two layers:","styles":{}}],"children":[]},{"id":"36796e87-f6d0-49fb-a703-dfe1cc2d2e9e","type":"procode","props":{"code":".depth-button = outer clickable button\n.depth-button__text = inner text with 3D shadow effect","language":"javascript","filename":"","files":"[{\"id\":\"ejop8yrb2\",\"name\":\"code\",\"code\":\".depth-button = outer clickable button\\n.depth-button__text = inner text with 3D shadow effect\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"27129c7f-43ef-42c7-a723-20db3cf40d25","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The script tag is included here:","styles":{}}],"children":[]},{"id":"817012e4-cac1-4d81-9418-85d8e52034e1","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"92icla5y9\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"05a7d2f3-7ab3-4680-90ca-4e52402ee621","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"But the provided project only has 3 files, so ","styles":{}},{"type":"text","text":"/index.js","styles":{"code":true}},{"type":"text","text":" is not included. For exact reproduction, keep it as provided.","styles":{}}],"children":[]},{"id":"772f8199-5876-48a6-9c8d-4cb61c92fbf4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style Flow\n\nThe ","styles":{}},{"type":"text","text":"/styles.css","styles":{"code":true}},{"type":"text","text":" file controls the full visual result.","styles":{}}],"children":[]},{"id":"e3b1c614-77ad-471a-b8b8-9ab6286b4708","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"First, the universal selector keeps layout sizing stable.","styles":{}}],"children":[]},{"id":"ec2d5efa-292b-4e91-b56a-35749a9ce813","type":"procode","props":{"code":"* {\n box-sizing: border-box;\n}","language":"javascript","filename":"","files":"[{\"id\":\"afaxj2un0\",\"name\":\"code\",\"code\":\"* {\\n box-sizing: border-box;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f6c0c53f-e73d-4fa3-8c66-9e6fbadca3d8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Body Flow\n\nThe body removes default browser margin, makes the page full height, sets the background to white, and uses a basic font stack.","styles":{}}],"children":[]},{"id":"b86b4652-4893-49bc-8ce7-f84b931310f8","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #fff;\n font-family: Arial, Helvetica, sans-serif;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8jvzk9bip\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f25f688a-e90d-49af-9f91-961fa396fee7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center Flow\n\nThe ","styles":{}},{"type":"text","text":".button-page","styles":{"code":true}},{"type":"text","text":" class centers the button horizontally and vertically.","styles":{}}],"children":[]},{"id":"b436f64e-18d4-4152-92be-0d7e95d9a0d9","type":"procode","props":{"code":".button-page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9137uhgdq\",\"name\":\"code\",\"code\":\".button-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6da09211-5a81-42a4-9775-f5c1e365c8f7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Wrapper Flow\n\nThe ","styles":{}},{"type":"text","text":".depth-button","styles":{"code":true}},{"type":"text","text":" class removes the default button style and keeps the button transparent.","styles":{}}],"children":[]},{"id":"42dd4a2b-5ce7-4db1-8ab6-ed3836108429","type":"procode","props":{"code":".depth-button {\n border: none;\n outline: none;\n cursor: pointer;\n padding: 10px 20px;\n background: transparent;\n font-size: 2em;\n transition: transform 0.2s ease-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7i5f87ske\",\"name\":\"code\",\"code\":\".depth-button {\\n border: none;\\n outline: none;\\n cursor: pointer;\\n padding: 10px 20px;\\n background: transparent;\\n font-size: 2em;\\n transition: transform 0.2s ease-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a9bf180-cab9-478e-9eba-8d0c82a8f581","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This outer button is mainly for interaction:","styles":{}}],"children":[]},{"id":"478e3933-3dcc-4942-a3b4-c562e07c48be","type":"procode","props":{"code":"click\nhover parent state\nactive scale\nkeyboard focus","language":"javascript","filename":"","files":"[{\"id\":\"st5ovw8al\",\"name\":\"code\",\"code\":\"click\\nhover parent state\\nactive scale\\nkeyboard focus\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1aab2d98-d8a5-4608-b28c-390a8f850422","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer Flow\n\nThe ","styles":{}},{"type":"text","text":".depth-button__text","styles":{"code":true}},{"type":"text","text":" span creates the visible 3D text.","styles":{}}],"children":[]},{"id":"e9265a8b-73b0-4495-8d2b-419063dbe6b4","type":"procode","props":{"code":".depth-button__text {\n display: inline-block;\n color: #131313;\n background: #fff;\n letter-spacing: 0.15em;\n font-weight: 700;\n line-height: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bywse2wv5\",\"name\":\"code\",\"code\":\".depth-button__text {\\n display: inline-block;\\n color: #131313;\\n background: #fff;\\n letter-spacing: 0.15em;\\n font-weight: 700;\\n line-height: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f93a0394-9dcf-491b-a552-1d3e42011bb4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The background is also ","styles":{}},{"type":"text","text":"#fff","styles":{"code":true}},{"type":"text","text":" so the text area blends with the white page.","styles":{}}],"children":[]},{"id":"74176a7e-70bb-4f3b-a725-e44c236a55b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Shadow Flow\n\nThe long ","styles":{}},{"type":"text","text":"text-shadow","styles":{"code":true}},{"type":"text","text":" stack creates the fake extrusion behind the text.","styles":{}}],"children":[]},{"id":"67ddd4c1-6503-4fe1-ba01-c67b398af010","type":"procode","props":{"code":"text-shadow:\n 1px -1px 0 #767676,\n -1px 2px 1px #737272,\n -2px 4px 1px #767474,\n -3px 6px 1px #787777;","language":"javascript","filename":"","files":"[{\"id\":\"qmibweh9e\",\"name\":\"code\",\"code\":\"text-shadow:\\n 1px -1px 0 #767676,\\n -1px 2px 1px #737272,\\n -2px 4px 1px #767474,\\n -3px 6px 1px #787777;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"364cdac9-5492-411f-a665-d41e8b0aa30f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The shadow keeps increasing in distance:","styles":{}}],"children":[]},{"id":"f7fd5142-b0ad-43a4-994f-0613614603bd","type":"procode","props":{"code":"small offset = near shadow\nlarge offset = deep shadow\nmany layers = 3D depth illusion","language":"javascript","filename":"","files":"[{\"id\":\"7k0r3mpcd\",\"name\":\"code\",\"code\":\"small offset = near shadow\\nlarge offset = deep shadow\\nmany layers = 3D depth illusion\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d577483d-5958-46e8-994e-97db15e8efbc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Shadow Direction\n\nThe default shadow moves mostly to the left and downward.","styles":{}}],"children":[]},{"id":"9f915d5c-8acf-4ff4-b276-9b2a4ccbd035","type":"procode","props":{"code":"-1px 2px\n-2px 4px\n-3px 6px\n...\n-28px 56px","language":"javascript","filename":"","files":"[{\"id\":\"6n4u8vh8i\",\"name\":\"code\",\"code\":\"-1px 2px\\n-2px 4px\\n-3px 6px\\n...\\n-28px 56px\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6ce95e00-0115-43d3-a74f-1af8c619766c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"That creates the first 3D direction.","styles":{}}],"children":[]},{"id":"9c5fd959-385b-4c09-acf1-7358be2e197e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow\n\nWhen hovering the button, the shadow direction flips to the opposite side.","styles":{}}],"children":[]},{"id":"8b62bde4-91d5-4d2c-96cc-f6b480f454cf","type":"procode","props":{"code":".depth-button:hover .depth-button__text {\n text-shadow:\n -1px -1px 0 #767676,\n 1px 2px 1px #737272,\n 2px 4px 1px #767474;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ypjdbj33x\",\"name\":\"code\",\"code\":\".depth-button:hover .depth-button__text {\\n text-shadow:\\n -1px -1px 0 #767676,\\n 1px 2px 1px #737272,\\n 2px 4px 1px #767474;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a47dec52-8615-4232-85dd-0df1a15a596b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The hover shadow now moves to the right and downward.","styles":{}}],"children":[]},{"id":"d7d7cf6a-0714-4f00-8c2d-3de32ec7c15b","type":"procode","props":{"code":"1px 2px\n2px 4px\n3px 6px\n...\n28px 56px","language":"javascript","filename":"","files":"[{\"id\":\"8ymay3q6z\",\"name\":\"code\",\"code\":\"1px 2px\\n2px 4px\\n3px 6px\\n...\\n28px 56px\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e6112094-5a94-46ba-beb4-634a50854b7d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the feeling that the 3D text changes direction when hovered.","styles":{}}],"children":[]},{"id":"b8f39ec6-5786-42e0-b8c1-a0df27fcc6da","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Transition Flow\n\nThe text shadow changes smoothly because of this transition:","styles":{}}],"children":[]},{"id":"de4dc4c9-e0ce-41e8-b1b3-c10095a064e3","type":"procode","props":{"code":"transition:\n text-shadow 0.2s ease-out,\n transform 0.2s ease-out;","language":"javascript","filename":"","files":"[{\"id\":\"0nx696v5l\",\"name\":\"code\",\"code\":\"transition:\\n text-shadow 0.2s ease-out,\\n transform 0.2s ease-out;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"525b4780-059d-4ca7-a629-610d1dcd8fa5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Click Flow\n\nWhen the button is clicked, the outer button scales down slightly.","styles":{}}],"children":[]},{"id":"d13c849a-21ab-4e06-a46a-6a360a4956c2","type":"procode","props":{"code":".depth-button:active {\n transform: scale(0.96);\n}","language":"javascript","filename":"","files":"[{\"id\":\"adbemyhyy\",\"name\":\"code\",\"code\":\".depth-button:active {\\n transform: scale(0.96);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b9a91640-995f-4aa7-b613-3cd1df8474c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"At the same time, the text shadow is removed.","styles":{}}],"children":[]},{"id":"7c4fca02-dc42-4b1a-9b71-1d0a3aaf4ca9","type":"procode","props":{"code":".depth-button:active .depth-button__text {\n text-shadow: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hbl53byfw\",\"name\":\"code\",\"code\":\".depth-button:active .depth-button__text {\\n text-shadow: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6cccdbdc-83bd-471a-89ca-357542e99aa1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the text look pressed flat.","styles":{}}],"children":[]},{"id":"888fffcf-d116-44d7-a78a-0dea7beaecdb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Flow\n\nWhen the user navigates with keyboard, the button shows an accessible focus outline.","styles":{}}],"children":[]},{"id":"609e73ee-da10-48dc-9922-66a08af95ca2","type":"procode","props":{"code":".depth-button:focus-visible {\n outline: 3px solid #767676;\n outline-offset: 8px;\n border-radius: 8px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"i2eipoksv\",\"name\":\"code\",\"code\":\".depth-button:focus-visible {\\n outline: 3px solid #767676;\\n outline-offset: 8px;\\n border-radius: 8px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d08844e-68c4-46e0-b710-dcca9ae38d96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow\n\nFor users who prefer less animation, all transitions are disabled.","styles":{}}],"children":[]},{"id":"18701e3a-9b13-48d8-b480-9faf65b5a1d5","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .depth-button,\n .depth-button__text {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"osq9noe5y\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .depth-button,\\n .depth-button__text {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e1bbc662-6482-4fd4-8b9e-0975bf23aa71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]