3D Stack Button

[{"id":"a455f2a4-249f-46c3-8dbc-9f7a3a2b0c6d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"99766109-7d63-4b95-8035-509aff263d94","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: #ffffff;\\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.stack-button {\\n transform: rotate(-25deg) skew(25deg);\\n transform-style: preserve-3d;\\n position: relative;\\n width: 100px;\\n height: 32px;\\n border: none;\\n background: transparent;\\n font-family: inherit;\\n cursor: pointer;\\n padding: 0;\\n}\\n\\n.stack-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -10px;\\n left: -5px;\\n width: 100%;\\n height: 10px;\\n background: #2a2a2a;\\n transform: skewX(-41deg);\\n}\\n\\n.stack-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 5px;\\n left: -9px;\\n width: 9px;\\n height: 100%;\\n background: #2a2a2a;\\n transform: skewY(-49deg);\\n}\\n\\n.stack-button span {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n min-width: 100%;\\n height: 100%;\\n background: #2a2a2a;\\n color: #ffffff;\\n font-size: 25px;\\n line-height: 32px;\\n text-align: center;\\n transition: 1.1s ease-out;\\n}\\n\\n.stack-button:hover span {\\n z-index: 1000;\\n transition: 0.3s;\\n color: #ffffff;\\n background: #52e19f;\\n}\\n\\n.stack-button:hover span:nth-child(5) {\\n transform: translate(40px, -40px);\\n opacity: 1;\\n}\\n\\n.stack-button:hover span:nth-child(4) {\\n transform: translate(30px, -30px);\\n opacity: 0.8;\\n}\\n\\n.stack-button:hover span:nth-child(3) {\\n transform: translate(20px, -20px);\\n opacity: 0.6;\\n}\\n\\n.stack-button:hover span:nth-child(2) {\\n transform: translate(10px, -10px);\\n opacity: 0.4;\\n}\\n\\n.stack-button:hover span:nth-child(1) {\\n transform: translate(0, 0);\\n opacity: 0.2;\\n}\\n\\n.stack-button:active span:nth-child(5) {\\n transform: translate(20px, -20px);\\n opacity: 1;\\n}\\n\\n.stack-button:active span:nth-child(4) {\\n transform: translate(15px, -15px);\\n}\\n\\n.stack-button:active span:nth-child(3) {\\n transform: translate(10px, -10px);\\n}\\n\\n.stack-button:active span:nth-child(2) {\\n transform: translate(5px, -5px);\\n}\\n\\n.stack-button:active span:nth-child(1) {\\n transform: translate(0, 0);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .stack-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n 3D Stack 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":"fb31b2ad-d144-44f3-bf8a-f2294ccac164","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"642422eb-9867-4a03-812a-eb764870d220","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a536eabc-0977-4412-9165-9195be685faf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"b73ddacf-3e6b-492b-b724-8067dcb34676","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: #ffffff;\\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.stack-button {\\n transform: rotate(-25deg) skew(25deg);\\n transform-style: preserve-3d;\\n position: relative;\\n width: 100px;\\n height: 32px;\\n border: none;\\n background: transparent;\\n font-family: inherit;\\n cursor: pointer;\\n padding: 0;\\n}\\n\\n.stack-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -10px;\\n left: -5px;\\n width: 100%;\\n height: 10px;\\n background: #2a2a2a;\\n transform: skewX(-41deg);\\n}\\n\\n.stack-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 5px;\\n left: -9px;\\n width: 9px;\\n height: 100%;\\n background: #2a2a2a;\\n transform: skewY(-49deg);\\n}\\n\\n.stack-button span {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n min-width: 100%;\\n height: 100%;\\n background: #2a2a2a;\\n color: #ffffff;\\n font-size: 25px;\\n line-height: 32px;\\n text-align: center;\\n transition: 1.1s ease-out;\\n}\\n\\n.stack-button:hover span {\\n z-index: 1000;\\n transition: 0.3s;\\n color: #ffffff;\\n background: #52e19f;\\n}\\n\\n.stack-button:hover span:nth-child(5) {\\n transform: translate(40px, -40px);\\n opacity: 1;\\n}\\n\\n.stack-button:hover span:nth-child(4) {\\n transform: translate(30px, -30px);\\n opacity: 0.8;\\n}\\n\\n.stack-button:hover span:nth-child(3) {\\n transform: translate(20px, -20px);\\n opacity: 0.6;\\n}\\n\\n.stack-button:hover span:nth-child(2) {\\n transform: translate(10px, -10px);\\n opacity: 0.4;\\n}\\n\\n.stack-button:hover span:nth-child(1) {\\n transform: translate(0, 0);\\n opacity: 0.2;\\n}\\n\\n.stack-button:active span:nth-child(5) {\\n transform: translate(20px, -20px);\\n opacity: 1;\\n}\\n\\n.stack-button:active span:nth-child(4) {\\n transform: translate(15px, -15px);\\n}\\n\\n.stack-button:active span:nth-child(3) {\\n transform: translate(10px, -10px);\\n}\\n\\n.stack-button:active span:nth-child(2) {\\n transform: translate(5px, -5px);\\n}\\n\\n.stack-button:active span:nth-child(1) {\\n transform: translate(0, 0);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .stack-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9febb9f8-a344-4c36-bbdd-d847be8c3ba3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"fef0bd7a-f86e-4358-ad90-018170066042","type":"divider","props":{},"children":[]},{"id":"35fa302c-b892-4097-807b-104ca77ecb88","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"6fdf3a4c-a8ba-4769-b213-36d7bf97c1be","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 3D stack button. It starts as a skewed dark button, then on hover the stacked layers spread diagonally upward and change to green.","styles":{}}],"children":[]},{"id":"fe9c2798-0977-405e-8f6e-d979f88e5a6c","type":"procode","props":{"code":".stack-button {\n transform: rotate(-25deg) skew(25deg);\n transform-style: preserve-3d;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gcx8p5abx\",\"name\":\"code\",\"code\":\".stack-button {\\n transform: rotate(-25deg) skew(25deg);\\n transform-style: preserve-3d;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d99b1ed-f234-4621-b045-e0fd7affbd45","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 middle.","styles":{}}],"children":[]},{"id":"1eb5ccb2-d9ca-4a18-93a7-b120714b3fd4","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fxyk3p1dg\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"256e5d36-05e9-487d-a21a-650d7937feee","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":".stack-button","styles":{"code":true}},{"type":"text","text":" is the main button wrapper. It has a fixed size, transparent background, and a skewed 3D transform.","styles":{}}],"children":[]},{"id":"e1bb6193-b13f-40e7-85df-25944a4a824a","type":"procode","props":{"code":".stack-button {\n transform: rotate(-25deg) skew(25deg);\n transform-style: preserve-3d;\n position: relative;\n width: 100px;\n height: 32px;\n border: none;\n background: transparent;\n font-family: inherit;\n cursor: pointer;\n padding: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m7zkryvxu\",\"name\":\"code\",\"code\":\".stack-button {\\n transform: rotate(-25deg) skew(25deg);\\n transform-style: preserve-3d;\\n position: relative;\\n width: 100px;\\n height: 32px;\\n border: none;\\n background: transparent;\\n font-family: inherit;\\n cursor: pointer;\\n padding: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"252b9412-35e2-4555-8a7a-3dc534a85e8b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"The side depth, bottom depth, and all stacked ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" layers are absolutely positioned inside the button.","styles":{}}],"children":[]},{"id":"f8afebe0-66dc-4327-98dd-1f0e12bbda6e","type":"procode","props":{"code":".stack-button {\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ztonmb423\",\"name\":\"code\",\"code\":\".stack-button {\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"768a0a39-c95e-47fa-b013-85437f8c59fd","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bottom 3D Edge\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the bottom side of the 3D button.","styles":{}}],"children":[]},{"id":"2ca09f0a-7637-477d-890f-a98ebe9dbc70","type":"procode","props":{"code":".stack-button::before {\n content: \"\";\n position: absolute;\n bottom: -10px;\n left: -5px;\n width: 100%;\n height: 10px;\n background: #2a2a2a;\n transform: skewX(-41deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"bld2duxmu\",\"name\":\"code\",\"code\":\".stack-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -10px;\\n left: -5px;\\n width: 100%;\\n height: 10px;\\n background: #2a2a2a;\\n transform: skewX(-41deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"14df71fe-b0d6-4468-96dd-4756635eafb5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Left 3D Edge\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the left side of the 3D button.","styles":{}}],"children":[]},{"id":"a2b639cd-ec67-420e-9f7b-38f23e052434","type":"procode","props":{"code":".stack-button::after {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -9px;\n width: 9px;\n height: 100%;\n background: #2a2a2a;\n transform: skewY(-49deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ibsfkiavc\",\"name\":\"code\",\"code\":\".stack-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 5px;\\n left: -9px;\\n width: 9px;\\n height: 100%;\\n background: #2a2a2a;\\n transform: skewY(-49deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec6677cc-48e9-4fd2-a0c7-c4dc5a708ccc","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stack Layers\n","styles":{"bold":true}},{"type":"text","text":"Each ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" becomes one layer of the stacked button. The last span contains the visible text.","styles":{}}],"children":[]},{"id":"33141c5f-a6c4-4e35-9791-34aa860ede34","type":"procode","props":{"code":".stack-button span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n min-width: 100%;\n height: 100%;\n background: #2a2a2a;\n color: #ffffff;\n font-size: 25px;\n line-height: 32px;\n text-align: center;\n transition: 1.1s ease-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kvn0y773y\",\"name\":\"code\",\"code\":\".stack-button span {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n min-width: 100%;\\n height: 100%;\\n background: #2a2a2a;\\n color: #ffffff;\\n font-size: 25px;\\n line-height: 32px;\\n text-align: center;\\n transition: 1.1s ease-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d01e3c51-8f9d-4050-ad3e-d4f90b8e6188","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Layer State\n","styles":{"bold":true}},{"type":"text","text":"On hover, all layers change to green and move above the pseudo depth using a high ","styles":{}},{"type":"text","text":"z-index","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"0bacb799-1b50-49ab-9b1d-9462a31ef58f","type":"procode","props":{"code":".stack-button:hover span {\n z-index: 1000;\n transition: 0.3s;\n color: #ffffff;\n background: #52e19f;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dtdesced0\",\"name\":\"code\",\"code\":\".stack-button:hover span {\\n z-index: 1000;\\n transition: 0.3s;\\n color: #ffffff;\\n background: #52e19f;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a1d8497-34fd-499d-aacf-afd32ac16d0d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Top Layer Hover Position\n","styles":{"bold":true}},{"type":"text","text":"The fifth span is the visible text layer. It moves the farthest upward and right.","styles":{}}],"children":[]},{"id":"3dbf990b-644a-40c1-ad21-47d7e42f631d","type":"procode","props":{"code":".stack-button:hover span:nth-child(5) {\n transform: translate(40px, -40px);\n opacity: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ubc535fw5\",\"name\":\"code\",\"code\":\".stack-button:hover span:nth-child(5) {\\n transform: translate(40px, -40px);\\n opacity: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f1c003a-869c-4e48-8bad-f1b07e285126","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Middle Layer Positions\n","styles":{"bold":true}},{"type":"text","text":"The other layers move in smaller steps to create the stacked depth effect.","styles":{}}],"children":[]},{"id":"8c40e2c8-baf4-4682-b996-2e856574f761","type":"procode","props":{"code":".stack-button:hover span:nth-child(4) {\n transform: translate(30px, -30px);\n opacity: 0.8;\n}\n\n.stack-button:hover span:nth-child(3) {\n transform: translate(20px, -20px);\n opacity: 0.6;\n}\n\n.stack-button:hover span:nth-child(2) {\n transform: translate(10px, -10px);\n opacity: 0.4;\n}\n\n.stack-button:hover span:nth-child(1) {\n transform: translate(0, 0);\n opacity: 0.2;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6lkzs3glj\",\"name\":\"code\",\"code\":\".stack-button:hover span:nth-child(4) {\\n transform: translate(30px, -30px);\\n opacity: 0.8;\\n}\\n\\n.stack-button:hover span:nth-child(3) {\\n transform: translate(20px, -20px);\\n opacity: 0.6;\\n}\\n\\n.stack-button:hover span:nth-child(2) {\\n transform: translate(10px, -10px);\\n opacity: 0.4;\\n}\\n\\n.stack-button:hover span:nth-child(1) {\\n transform: translate(0, 0);\\n opacity: 0.2;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca07c2ed-1df2-431f-b6dc-1ae3c3d9bd64","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Pressed State\n","styles":{"bold":true}},{"type":"text","text":"When clicked, the stack compresses. The top layer moves less than on hover, making it feel pressed down.","styles":{}}],"children":[]},{"id":"da7ec808-1a48-4ab9-b646-af7495ab3c7a","type":"procode","props":{"code":".stack-button:active span:nth-child(5) {\n transform: translate(20px, -20px);\n opacity: 1;\n}\n\n.stack-button:active span:nth-child(4) {\n transform: translate(15px, -15px);\n}\n\n.stack-button:active span:nth-child(3) {\n transform: translate(10px, -10px);\n}\n\n.stack-button:active span:nth-child(2) {\n transform: translate(5px, -5px);\n}\n\n.stack-button:active span:nth-child(1) {\n transform: translate(0, 0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"amuvk1710\",\"name\":\"code\",\"code\":\".stack-button:active span:nth-child(5) {\\n transform: translate(20px, -20px);\\n opacity: 1;\\n}\\n\\n.stack-button:active span:nth-child(4) {\\n transform: translate(15px, -15px);\\n}\\n\\n.stack-button:active span:nth-child(3) {\\n transform: translate(10px, -10px);\\n}\\n\\n.stack-button:active span:nth-child(2) {\\n transform: translate(5px, -5px);\\n}\\n\\n.stack-button:active span:nth-child(1) {\\n transform: translate(0, 0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4511824c-5a1a-4051-a0b3-0e73f4874990","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 animation flow. The spans spread out on hover and compress on active.","styles":{}}],"children":[]},{"id":"ed548329-eca6-41aa-bd78-b60d26d764a7","type":"procode","props":{"code":".stack-button:hover span:nth-child(5) {\n transform: translate(40px, -40px);\n opacity: 1;\n}\n\n.stack-button:hover span:nth-child(4) {\n transform: translate(30px, -30px);\n opacity: 0.8;\n}\n\n.stack-button:hover span:nth-child(3) {\n transform: translate(20px, -20px);\n opacity: 0.6;\n}\n\n.stack-button:hover span:nth-child(2) {\n transform: translate(10px, -10px);\n opacity: 0.4;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uuje9yuov\",\"name\":\"code\",\"code\":\".stack-button:hover span:nth-child(5) {\\n transform: translate(40px, -40px);\\n opacity: 1;\\n}\\n\\n.stack-button:hover span:nth-child(4) {\\n transform: translate(30px, -30px);\\n opacity: 0.8;\\n}\\n\\n.stack-button:hover span:nth-child(3) {\\n transform: translate(20px, -20px);\\n opacity: 0.6;\\n}\\n\\n.stack-button:hover span:nth-child(2) {\\n transform: translate(10px, -10px);\\n opacity: 0.4;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ab16dee5-30ec-466b-b61b-99c1013c8fb3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why Five Spans Are Used\n","styles":{"bold":true}},{"type":"text","text":"The first four empty spans create the fake layers, and the fifth span contains the visible ","styles":{}},{"type":"text","text":"Button","styles":{"code":true}},{"type":"text","text":" text.","styles":{}}],"children":[]},{"id":"89d271ab-652d-4b19-8e12-e0174e56d91f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"azqivg024\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a80449f7-f532-469e-9063-8d439ee8e98a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"rotate","styles":{"code":true}},{"type":"text","text":" And ","styles":{"bold":true}},{"type":"text","text":"skew","styles":{"code":true}},{"type":"text","text":" Are Used\n","styles":{"bold":true}},{"type":"text","text":"rotate(-25deg)","styles":{"code":true}},{"type":"text","text":" tilts the button, while ","styles":{}},{"type":"text","text":"skew(25deg)","styles":{"code":true}},{"type":"text","text":" gives the button an isometric 3D angle.","styles":{}}],"children":[]},{"id":"dc81fd65-2a01-4cd9-a94f-f3be4fa92e3c","type":"procode","props":{"code":".stack-button {\n transform: rotate(-25deg) skew(25deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"pqqxon2sx\",\"name\":\"code\",\"code\":\".stack-button {\\n transform: rotate(-25deg) skew(25deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3e0fc665-70ff-4877-a507-1c186a3836fc","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The default transition is slower at ","styles":{}},{"type":"text","text":"1.1s ease-out","styles":{"code":true}},{"type":"text","text":", while the hover transition becomes faster at ","styles":{}},{"type":"text","text":"0.3s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4f273851-30cc-4774-9eb1-ed1a8d3507da","type":"procode","props":{"code":".stack-button span {\n transition: 1.1s ease-out;\n}\n\n.stack-button:hover span {\n transition: 0.3s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"itgquc1vs\",\"name\":\"code\",\"code\":\".stack-button span {\\n transition: 1.1s ease-out;\\n}\\n\\n.stack-button:hover span {\\n transition: 0.3s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6709ef5-be83-47bb-b138-9953bc445641","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 layer transitions are removed.","styles":{}}],"children":[]},{"id":"062fc055-8215-4540-9691-52de24061832","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .stack-button span {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"rv5u0sp9g\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .stack-button span {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25aea408-9208-4734-8884-49973716a530","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the default return speed here:","styles":{}}],"children":[]},{"id":"db587847-1c7c-4b6d-9c99-e0a38929ac5c","type":"procode","props":{"code":".stack-button span {\n transition: 1.1s ease-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"5p3587pgp\",\"name\":\"code\",\"code\":\".stack-button span {\\n transition: 1.1s ease-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3dba8b3f-777b-46c0-8e9f-da1b70b56fc2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover spread speed here:","styles":{}}],"children":[]},{"id":"cb2968f8-5791-4082-b96c-c89808958260","type":"procode","props":{"code":".stack-button:hover span {\n transition: 0.3s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9q1eycht1\",\"name\":\"code\",\"code\":\".stack-button:hover span {\\n transition: 0.3s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2eb802d0-380d-4186-a53e-c19ce2fd656f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the default stack color here:","styles":{}}],"children":[]},{"id":"9628f360-496f-4d76-b165-c6801a6b8303","type":"procode","props":{"code":".stack-button span,\n.stack-button::before,\n.stack-button::after {\n background: #2a2a2a;\n}","language":"javascript","filename":"","files":"[{\"id\":\"edwds58az\",\"name\":\"code\",\"code\":\".stack-button span,\\n.stack-button::before,\\n.stack-button::after {\\n background: #2a2a2a;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"274c363a-3655-43f1-b7be-371899f32fc0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover stack color here:","styles":{}}],"children":[]},{"id":"2eecd2b3-209a-4abb-9a9f-c7c96ee0ddd9","type":"procode","props":{"code":".stack-button:hover span {\n background: #52e19f;\n}","language":"javascript","filename":"","files":"[{\"id\":\"pd4v0aea5\",\"name\":\"code\",\"code\":\".stack-button:hover span {\\n background: #52e19f;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"79141dc3-90f0-47f7-bb44-93255127b17e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text color here:","styles":{}}],"children":[]},{"id":"f2523262-b76d-48b4-a4da-e10fa83b871c","type":"procode","props":{"code":".stack-button span {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wura2yajs\",\"name\":\"code\",\"code\":\".stack-button span {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5d8a2c0-cb89-48ac-a0b2-441d8c51ffa4","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 size here:","styles":{}}],"children":[]},{"id":"31f2ff03-a02b-4994-9f40-d0251665a6f6","type":"procode","props":{"code":".stack-button {\n width: 100px;\n height: 32px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s8hgf1bv2\",\"name\":\"code\",\"code\":\".stack-button {\\n width: 100px;\\n height: 32px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a140b78-47e3-49a2-b23b-9c0b3feedd64","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"20b170fe-9531-4f22-9431-842f2033e850","type":"procode","props":{"code":".stack-button span {\n font-size: 25px;\n line-height: 32px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"18k6ioc2p\",\"name\":\"code\",\"code\":\".stack-button span {\\n font-size: 25px;\\n line-height: 32px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9daf0826-7cf5-4e0f-8f21-646f06cfe6dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the stack distance here:","styles":{}}],"children":[]},{"id":"89ce4f99-27f4-4c4c-9c49-ac5491292f40","type":"procode","props":{"code":".stack-button:hover span:nth-child(5) {\n transform: translate(40px, -40px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"09q0s30hf\",\"name\":\"code\",\"code\":\".stack-button:hover span:nth-child(5) {\\n transform: translate(40px, -40px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e7d3130-3b2a-49a5-93b7-d66a727a5a10","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the button text inside the fifth ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3b54a207-0eaa-46be-b062-cc736cf2ac94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]