Layer Shadow Button

[{"id":"cf782736-89e9-4537-95df-e3a3e9142875","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"53070125-b403-4907-9aff-96ddbbe4243f","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #000;\\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.layer-button {\\n font-size: 17px;\\n padding: 1ch 2ch;\\n background-color: #ffffff;\\n color: #000000;\\n cursor: pointer;\\n border: none;\\n border-radius: 2px;\\n transition:\\n background-color 0.5s ease,\\n color 0.5s ease,\\n box-shadow 0.5s ease,\\n transform 0.5s ease;\\n box-shadow:\\n 2px 2px 0 hsl(0, 0%, 90%),\\n 4px 4px 0 hsl(0, 0%, 80%),\\n 6px 6px 0 hsl(0, 0%, 70%),\\n 8px 8px 0 hsl(0, 0%, 60%),\\n 10px 10px 0 hsl(0, 0%, 50%),\\n 12px 12px 0 hsl(0, 0%, 40%),\\n 14px 14px 0 hsl(0, 0%, 30%),\\n 16px 16px 0 hsl(0, 0%, 20%),\\n 18px 18px 0 hsl(0, 0%, 10%);\\n}\\n\\n.layer-button:hover {\\n background-color: hsl(0, 0%, 50%);\\n color: #ffffff;\\n box-shadow: none;\\n transform: translate(9px, 9px);\\n}\\n\\n.layer-button:active {\\n transform: translate(10px, 10px) scale(0.97);\\n}\\n\\n.layer-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.18);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .layer-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Layer 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":"3431b064-f49c-47bb-a488-27d9b73c46a7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"07a423be-a509-4a3d-8742-4c8294e0430b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"423e8765-89ce-4155-a4f5-3c392a132a3b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"bbe2ec1d-ed63-407e-8512-6c04611ec208","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #000;\\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.layer-button {\\n font-size: 17px;\\n padding: 1ch 2ch;\\n background-color: #ffffff;\\n color: #000000;\\n cursor: pointer;\\n border: none;\\n border-radius: 2px;\\n transition:\\n background-color 0.5s ease,\\n color 0.5s ease,\\n box-shadow 0.5s ease,\\n transform 0.5s ease;\\n box-shadow:\\n 2px 2px 0 hsl(0, 0%, 90%),\\n 4px 4px 0 hsl(0, 0%, 80%),\\n 6px 6px 0 hsl(0, 0%, 70%),\\n 8px 8px 0 hsl(0, 0%, 60%),\\n 10px 10px 0 hsl(0, 0%, 50%),\\n 12px 12px 0 hsl(0, 0%, 40%),\\n 14px 14px 0 hsl(0, 0%, 30%),\\n 16px 16px 0 hsl(0, 0%, 20%),\\n 18px 18px 0 hsl(0, 0%, 10%);\\n}\\n\\n.layer-button:hover {\\n background-color: hsl(0, 0%, 50%);\\n color: #ffffff;\\n box-shadow: none;\\n transform: translate(9px, 9px);\\n}\\n\\n.layer-button:active {\\n transform: translate(10px, 10px) scale(0.97);\\n}\\n\\n.layer-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.18);\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .layer-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f02c168a-daa5-4940-8677-ca6105757109","type":"divider","props":{},"children":[]},{"id":"e4fec8c2-6914-4fa0-90d1-1f934005ba50","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"677f9202-3dc6-444a-9578-508335e0225c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a layer shadow button. It uses a white button on a black background with many stacked shadows behind it to create a stepped depth effect.","styles":{}}],"children":[]},{"id":"adcc0bff-de16-484e-be2d-6e7ac31d8545","type":"procode","props":{"code":"body {\n margin: 0;\n background: #000;\n font-family: Arial, Helvetica, sans-serif;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2vah6yclx\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n background: #000;\\n font-family: Arial, Helvetica, sans-serif;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"833a4d65-765f-4aa5-9b41-4cba3f96709f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The button is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the button in the center.","styles":{}}],"children":[]},{"id":"e3fcc07a-d114-4c1e-a9e6-43e083fb2498","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mdf5c4798\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bde97451-a5c1-4531-8574-d61a4f2b8e70","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".layer-button","styles":{"code":true}},{"type":"text","text":" is a simple rectangular button with small rounded corners, white background, and black text.","styles":{}}],"children":[]},{"id":"346d3758-dc08-44d3-bee9-54c709a8ede2","type":"procode","props":{"code":".layer-button {\n font-size: 17px;\n padding: 1ch 2ch;\n background-color: #ffffff;\n color: #000000;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6xxn9xnfp\",\"name\":\"code\",\"code\":\".layer-button {\\n font-size: 17px;\\n padding: 1ch 2ch;\\n background-color: #ffffff;\\n color: #000000;\\n cursor: pointer;\\n border: none;\\n border-radius: 2px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f8f95b2f-6f44-4163-939f-268b073939c2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layered Shadow Setup\n","styles":{"bold":true}},{"type":"text","text":"The depth effect is created using multiple ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":" layers. Each shadow moves farther down-right and gets darker.","styles":{}}],"children":[]},{"id":"cbbf0aca-9228-4f07-9a99-f6a462bdae86","type":"procode","props":{"code":".layer-button {\n box-shadow:\n 2px 2px 0 hsl(0, 0%, 90%),\n 4px 4px 0 hsl(0, 0%, 80%),\n 6px 6px 0 hsl(0, 0%, 70%),\n 8px 8px 0 hsl(0, 0%, 60%),\n 10px 10px 0 hsl(0, 0%, 50%),\n 12px 12px 0 hsl(0, 0%, 40%),\n 14px 14px 0 hsl(0, 0%, 30%),\n 16px 16px 0 hsl(0, 0%, 20%),\n 18px 18px 0 hsl(0, 0%, 10%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"5byqao823\",\"name\":\"code\",\"code\":\".layer-button {\\n box-shadow:\\n 2px 2px 0 hsl(0, 0%, 90%),\\n 4px 4px 0 hsl(0, 0%, 80%),\\n 6px 6px 0 hsl(0, 0%, 70%),\\n 8px 8px 0 hsl(0, 0%, 60%),\\n 10px 10px 0 hsl(0, 0%, 50%),\\n 12px 12px 0 hsl(0, 0%, 40%),\\n 14px 14px 0 hsl(0, 0%, 30%),\\n 16px 16px 0 hsl(0, 0%, 20%),\\n 18px 18px 0 hsl(0, 0%, 10%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4d29428f-fc3c-40f8-8b28-9c1533848c7b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why Multiple Shadows Are Used\n","styles":{"bold":true}},{"type":"text","text":"Each shadow layer is offset by ","styles":{}},{"type":"text","text":"2px","styles":{"code":true}},{"type":"text","text":". Together, they create a fake stacked 3D block behind the button.","styles":{}}],"children":[]},{"id":"8c849d3a-afea-4642-b937-097bb27814f0","type":"procode","props":{"code":"box-shadow:\n 2px 2px 0 hsl(0, 0%, 90%),\n 4px 4px 0 hsl(0, 0%, 80%),\n 6px 6px 0 hsl(0, 0%, 70%);","language":"javascript","filename":"","files":"[{\"id\":\"xhal2bw90\",\"name\":\"code\",\"code\":\"box-shadow:\\n 2px 2px 0 hsl(0, 0%, 90%),\\n 4px 4px 0 hsl(0, 0%, 80%),\\n 6px 6px 0 hsl(0, 0%, 70%);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ab0c3432-0e4d-4b8f-8722-62bee8c36814","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the button background becomes gray, the text becomes white, the shadows disappear, and the button moves down-right.","styles":{}}],"children":[]},{"id":"754fbe93-2e76-4cde-95b2-87cbe7a74232","type":"procode","props":{"code":".layer-button:hover {\n background-color: hsl(0, 0%, 50%);\n color: #ffffff;\n box-shadow: none;\n transform: translate(9px, 9px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"2rk4a1kh3\",\"name\":\"code\",\"code\":\".layer-button:hover {\\n background-color: hsl(0, 0%, 50%);\\n color: #ffffff;\\n box-shadow: none;\\n transform: translate(9px, 9px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a056bc74-7b70-4568-9b3f-6255f84108f8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Motion Logic\n","styles":{"bold":true}},{"type":"text","text":"The button moves by ","styles":{}},{"type":"text","text":"9px, 9px","styles":{"code":true}},{"type":"text","text":" because the original shadow stack reaches ","styles":{}},{"type":"text","text":"18px, 18px","styles":{"code":true}},{"type":"text","text":". Moving halfway creates the feeling that the button is pressing into the layered stack.","styles":{}}],"children":[]},{"id":"b2da281f-de8f-496a-95d3-3af70bfc477c","type":"procode","props":{"code":".layer-button:hover {\n transform: translate(9px, 9px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"6cbb1slh5\",\"name\":\"code\",\"code\":\".layer-button:hover {\\n transform: translate(9px, 9px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3cd05f01-bf50-4cd0-8e38-38a2f6b0778a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Pressed State\n","styles":{"bold":true}},{"type":"text","text":"On click, the button moves slightly farther and scales down. This makes the button feel fully pressed.","styles":{}}],"children":[]},{"id":"62ba98aa-ea19-473e-9efd-8248aac8db8b","type":"procode","props":{"code":".layer-button:active {\n transform: translate(10px, 10px) scale(0.97);\n}","language":"javascript","filename":"","files":"[{\"id\":\"qelrmf0hd\",\"name\":\"code\",\"code\":\".layer-button:active {\\n transform: translate(10px, 10px) scale(0.97);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"67889f70-566d-42bc-8690-7827b9fdfe7e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Visible\n","styles":{"bold":true}},{"type":"text","text":"When focused using keyboard navigation, the button shows an outline.","styles":{}}],"children":[]},{"id":"28882ad6-27c0-486b-b45f-d805ac9247db","type":"procode","props":{"code":".layer-button:focus-visible {\n outline: 3px solid rgba(0, 0, 0, 0.18);\n outline-offset: 6px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"w3nw3x0h1\",\"name\":\"code\",\"code\":\".layer-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.18);\\n outline-offset: 6px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e04d5e6f-794e-476a-955e-fa3b32f15f1d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button animates its background color, text color, shadow, and transform using ","styles":{}},{"type":"text","text":"0.5s ease","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a0f99350-a30a-4e95-9a2f-9dd63a547b8a","type":"procode","props":{"code":".layer-button {\n transition:\n background-color 0.5s ease,\n color 0.5s ease,\n box-shadow 0.5s ease,\n transform 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ebt008p9z\",\"name\":\"code\",\"code\":\".layer-button {\\n transition:\\n background-color 0.5s ease,\\n color 0.5s ease,\\n box-shadow 0.5s ease,\\n transform 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2df5a4e4-bc00-40a1-ba9b-21fccd83c532","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main interaction flow. The button starts with layered shadows, then on hover the shadows disappear and the button moves into their position.","styles":{}}],"children":[]},{"id":"446fc376-a269-4370-8ca8-de2724dda5f5","type":"procode","props":{"code":".layer-button {\n box-shadow:\n 2px 2px 0 hsl(0, 0%, 90%),\n 4px 4px 0 hsl(0, 0%, 80%),\n 6px 6px 0 hsl(0, 0%, 70%),\n 8px 8px 0 hsl(0, 0%, 60%),\n 10px 10px 0 hsl(0, 0%, 50%),\n 12px 12px 0 hsl(0, 0%, 40%),\n 14px 14px 0 hsl(0, 0%, 30%),\n 16px 16px 0 hsl(0, 0%, 20%),\n 18px 18px 0 hsl(0, 0%, 10%);\n}\n\n.layer-button:hover {\n box-shadow: none;\n transform: translate(9px, 9px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"nrqohv9sp\",\"name\":\"code\",\"code\":\".layer-button {\\n box-shadow:\\n 2px 2px 0 hsl(0, 0%, 90%),\\n 4px 4px 0 hsl(0, 0%, 80%),\\n 6px 6px 0 hsl(0, 0%, 70%),\\n 8px 8px 0 hsl(0, 0%, 60%),\\n 10px 10px 0 hsl(0, 0%, 50%),\\n 12px 12px 0 hsl(0, 0%, 40%),\\n 14px 14px 0 hsl(0, 0%, 30%),\\n 16px 16px 0 hsl(0, 0%, 20%),\\n 18px 18px 0 hsl(0, 0%, 10%);\\n}\\n\\n.layer-button:hover {\\n box-shadow: none;\\n transform: translate(9px, 9px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"88b5bcd0-b162-4dba-a619-f01a32b61b80","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"If the user prefers reduced motion, the button transition is removed.","styles":{}}],"children":[]},{"id":"1bab1848-464c-423a-8ad9-f57a8915d167","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .layer-button {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"kp0m53u9s\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .layer-button {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2c0ad46e-9f93-4a2c-8f1f-265013f6ca50","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the animation speed here:","styles":{}}],"children":[]},{"id":"ffeef98e-b1dd-4e49-b4d1-ead79969cdbd","type":"procode","props":{"code":".layer-button {\n transition:\n background-color 0.5s ease,\n color 0.5s ease,\n box-shadow 0.5s ease,\n transform 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o74ljv8r6\",\"name\":\"code\",\"code\":\".layer-button {\\n transition:\\n background-color 0.5s ease,\\n color 0.5s ease,\\n box-shadow 0.5s ease,\\n transform 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b2abe68b-bece-4f92-99ea-967a3d55b811","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the page background here:","styles":{}}],"children":[]},{"id":"68e2de85-596e-41a9-80e6-964269358bc8","type":"procode","props":{"code":"body {\n background: #000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vqphygg5b\",\"name\":\"code\",\"code\":\"body {\\n background: #000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5daf654f-40c7-4da8-a7a6-30063edeacef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button default color here:","styles":{}}],"children":[]},{"id":"962b77e3-2dad-4a8b-a087-c5b715037918","type":"procode","props":{"code":".layer-button {\n background-color: #ffffff;\n color: #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lfi5otikz\",\"name\":\"code\",\"code\":\".layer-button {\\n background-color: #ffffff;\\n color: #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e5f72172-cbd9-4b34-81f7-27df06e0e7a7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover color here:","styles":{}}],"children":[]},{"id":"cde16dee-d1cc-47cd-866c-f60a60d821dd","type":"procode","props":{"code":".layer-button:hover {\n background-color: hsl(0, 0%, 50%);\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uqeh54qkt\",\"name\":\"code\",\"code\":\".layer-button:hover {\\n background-color: hsl(0, 0%, 50%);\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"770fbf78-8fce-4c7f-873c-d2825a4e7ab0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the button padding here:","styles":{}}],"children":[]},{"id":"da56565d-667c-4acd-b456-9bdd03270c22","type":"procode","props":{"code":".layer-button {\n padding: 1ch 2ch;\n}","language":"javascript","filename":"","files":"[{\"id\":\"322haz09h\",\"name\":\"code\",\"code\":\".layer-button {\\n padding: 1ch 2ch;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7c32cb1-780d-4d0b-ba03-bb0cc570cdfd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"d7b6121c-24c3-41df-850b-d917f72c9ee3","type":"procode","props":{"code":".layer-button {\n font-size: 17px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"itp19s3tr\",\"name\":\"code\",\"code\":\".layer-button {\\n font-size: 17px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"71eb3f77-b97e-4348-b17a-c9fc46e01822","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the corner radius here:","styles":{}}],"children":[]},{"id":"212d66ab-c0cd-43f9-beb8-bcc20df7c20f","type":"procode","props":{"code":".layer-button {\n border-radius: 2px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nyb6i9whh\",\"name\":\"code\",\"code\":\".layer-button {\\n border-radius: 2px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5f755f4f-8e8f-4b6e-b47c-cda5d251412f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shadow Depth\n","styles":{"bold":true}},{"type":"text","text":"Change the deepest shadow by editing the last shadow layer.","styles":{}}],"children":[]},{"id":"75873f17-7a39-4f6b-85ea-f548a22972c4","type":"procode","props":{"code":".layer-button {\n box-shadow:\n 18px 18px 0 hsl(0, 0%, 10%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"x3ij5bkiq\",\"name\":\"code\",\"code\":\".layer-button {\\n box-shadow:\\n 18px 18px 0 hsl(0, 0%, 10%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec8cdb5e-4f0a-4761-adb2-1270bb732b3b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]