Jump Shadow Button

[{"id":"5996db71-f705-4540-9d6e-53d0d80e2837","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"41a7a0cd-bf40-4729-a90f-2537501a1f81","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: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.jump-shadow-button {\\n width: 130px;\\n height: 40px;\\n font-size: 1.1em;\\n cursor: pointer;\\n background-color: #5d3fd3;\\n color: #ffffff;\\n border: none;\\n border-radius: 5px;\\n transition: all 0.4s;\\n}\\n\\n.jump-shadow-button:hover {\\n border-radius: 5px;\\n transform: translateY(-10px);\\n box-shadow:\\n 0 7px 0 -2px #4b2fc4,\\n 0 15px 0 -4px #8b74ff,\\n 0 16px 10px -3px #8b74ff;\\n}\\n\\n.jump-shadow-button:active {\\n transition: all 0.2s;\\n transform: translateY(-5px);\\n box-shadow:\\n 0 2px 0 -2px #4b2fc4,\\n 0 8px 0 -4px #8b74ff,\\n 0 12px 10px -3px #8b74ff;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .jump-shadow-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Jump 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":"8784590a-39a9-4862-825b-69f47b3b6162","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"01eee73e-4db7-4c63-8b14-3d53ab5cc80a","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"46528615-0689-478b-b90f-4babb2eaf3eb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"a3b6dd36-1f05-4f90-b625-245049be3656","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: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.jump-shadow-button {\\n width: 130px;\\n height: 40px;\\n font-size: 1.1em;\\n cursor: pointer;\\n background-color: #5d3fd3;\\n color: #ffffff;\\n border: none;\\n border-radius: 5px;\\n transition: all 0.4s;\\n}\\n\\n.jump-shadow-button:hover {\\n border-radius: 5px;\\n transform: translateY(-10px);\\n box-shadow:\\n 0 7px 0 -2px #4b2fc4,\\n 0 15px 0 -4px #8b74ff,\\n 0 16px 10px -3px #8b74ff;\\n}\\n\\n.jump-shadow-button:active {\\n transition: all 0.2s;\\n transform: translateY(-5px);\\n box-shadow:\\n 0 2px 0 -2px #4b2fc4,\\n 0 8px 0 -4px #8b74ff,\\n 0 12px 10px -3px #8b74ff;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .jump-shadow-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc76f260-d799-4b1c-a5e1-5487b9011dbf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"d766dab5-d9ae-4c64-b09a-dd3d64e027c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a0b7ae45-7458-4374-99d3-6f522caabd1e","type":"divider","props":{},"children":[]},{"id":"a265f5d6-eaab-4ced-acea-918fda95d776","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0bdc367d-df95-47d8-9ec2-e38613b2019c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"6faaef8a-a371-4267-9ec6-a0bb41b329ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The HTML uses one centered button inside a main wrapper.","styles":{}}],"children":[]},{"id":"bea0167b-57b0-478b-881b-48ead7653dbf","type":"procode","props":{"code":"

\n \n

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

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"60a257e3-1041-4409-b8a7-b96a68f9647f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper only handles layout.\n\nThe ","styles":{}},{"type":"text","text":".jump-shadow-button","styles":{"code":true}},{"type":"text","text":" class handles the button design and animation.","styles":{}}],"children":[]},{"id":"f05a6372-95f7-48f3-9cd2-cea30fda2894","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"c118bf1c-3b38-4a36-9adc-d1419bf3c491","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is centered using flexbox on the ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" container.","styles":{}}],"children":[]},{"id":"caa9838d-6352-41db-941c-d2272a063246","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"woc7iq6a3\",\"name\":\"code\",\"code\":\".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":"6236cb9c-c1e2-4e01-b7bb-aecd1757c982","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This keeps the button in the middle of the screen without adding extra decoration.","styles":{}}],"children":[]},{"id":"15a72d25-398c-4549-bcb4-e1ea7e63fc0a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base Style","styles":{}}],"children":[]},{"id":"46f0a602-aee1-4b42-8b68-222998ecfc71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The default button has a fixed width and height.","styles":{}}],"children":[]},{"id":"6c021083-4514-4bf9-b1b3-db4e13222e45","type":"procode","props":{"code":".jump-shadow-button {\n width: 130px;\n height: 40px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wjvnjvs7h\",\"name\":\"code\",\"code\":\".jump-shadow-button {\\n width: 130px;\\n height: 40px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"244d4826-787e-4439-ae46-bb19ed0ec253","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original text ","styles":{}},{"type":"text","text":"Hover Me!","styles":{"code":true}},{"type":"text","text":" is changed to:","styles":{}}],"children":[]},{"id":"245792b1-a244-4905-822d-4a4547c0d871","type":"procode","props":{"code":"Button","language":"javascript","filename":"","files":"[{\"id\":\"ejcrcg5gd\",\"name\":\"code\",\"code\":\"Button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"47f960ef-c02a-4f77-bdc3-a89e3b66c774","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button background is changed to iris color:","styles":{}}],"children":[]},{"id":"d1ce67ce-5453-4316-ae73-b906b3ab74ef","type":"procode","props":{"code":"background-color: #5d3fd3;","language":"javascript","filename":"","files":"[{\"id\":\"nodysl8z3\",\"name\":\"code\",\"code\":\"background-color: #5d3fd3;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"827c803d-3d36-4872-9702-cd04ea3b2544","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text stays white:","styles":{}}],"children":[]},{"id":"d17c78c9-a448-4ade-9f9e-2e97716355c2","type":"procode","props":{"code":"color: #ffffff;","language":"javascript","filename":"","files":"[{\"id\":\"8fdofgdm9\",\"name\":\"code\",\"code\":\"color: #ffffff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd149234-2017-4e73-a340-c54bb6f28b67","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation","styles":{}}],"children":[]},{"id":"d1feded9-1c27-43e4-aefc-46a6ca4e10ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the user hovers the button, the button moves upward.","styles":{}}],"children":[]},{"id":"a9a2d86a-2839-4962-80ca-ecd53fad6f05","type":"procode","props":{"code":"transform: translateY(-10px);","language":"javascript","filename":"","files":"[{\"id\":\"1gi27hm84\",\"name\":\"code\",\"code\":\"transform: translateY(-10px);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2090f7ea-2ed4-4a45-8117-40ada5e1fb3a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the floating effect.","styles":{}}],"children":[]},{"id":"bb3a7382-7149-4ac1-81e6-c21c51e24e2d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Shadow","styles":{}}],"children":[]},{"id":"d486446b-0aed-4d75-af32-857771ee8baa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The layered shadow appears below the button.","styles":{}}],"children":[]},{"id":"e76dfb9c-5e0f-4883-8e80-d55d94c2e4fb","type":"procode","props":{"code":"box-shadow:\n 0 7px 0 -2px #4b2fc4,\n 0 15px 0 -4px #8b74ff,\n 0 16px 10px -3px #8b74ff;","language":"javascript","filename":"","files":"[{\"id\":\"cgpivun0p\",\"name\":\"code\",\"code\":\"box-shadow:\\n 0 7px 0 -2px #4b2fc4,\\n 0 15px 0 -4px #8b74ff,\\n 0 16px 10px -3px #8b74ff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"603bdbc5-3cf4-4bb5-a5ff-e72cf6cea9dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The first shadow is the darker purple layer.\n\nThe second shadow is the lighter iris layer.\n\nThe third shadow adds the soft blur under the button.","styles":{}}],"children":[]},{"id":"4cda81f4-55d9-43fc-8f5f-3ff0e599b6ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Animation","styles":{}}],"children":[]},{"id":"5bb5f27b-02ce-43e8-8a2e-11612b6a1976","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the button is clicked, it moves slightly back down.","styles":{}}],"children":[]},{"id":"2637f2bb-28c5-4aa8-95ca-ade04fa0e8e3","type":"procode","props":{"code":"transform: translateY(-5px);","language":"javascript","filename":"","files":"[{\"id\":\"3ufql146b\",\"name\":\"code\",\"code\":\"transform: translateY(-5px);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"470f84c1-d1f2-406e-849e-6b7527e72769","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button feel pressed while still keeping the hover style visible.","styles":{}}],"children":[]},{"id":"8ad93ad9-5bae-4f0d-a76a-294a0bc9e615","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Shadow","styles":{}}],"children":[]},{"id":"d3f0ddfe-02bd-44e9-bcf1-8c62f6eb5836","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The active shadow becomes smaller.","styles":{}}],"children":[]},{"id":"e0b0b8c1-daa3-4fa6-a94f-ffe50d3543f2","type":"procode","props":{"code":"box-shadow:\n 0 2px 0 -2px #4b2fc4,\n 0 8px 0 -4px #8b74ff,\n 0 12px 10px -3px #8b74ff;","language":"javascript","filename":"","files":"[{\"id\":\"fm1joh9tn\",\"name\":\"code\",\"code\":\"box-shadow:\\n 0 2px 0 -2px #4b2fc4,\\n 0 8px 0 -4px #8b74ff,\\n 0 12px 10px -3px #8b74ff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf589d56-3ac0-4366-bda7-7aadb24e0b43","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button feel closer to the surface when clicked.","styles":{}}],"children":[]},{"id":"81cb8e37-5d0f-431a-b93c-127c051999ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Transition Flow","styles":{}}],"children":[]},{"id":"841a4771-759b-4574-b74a-1bf3035930c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The normal hover transition uses ","styles":{}},{"type":"text","text":"0.4s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"25d2cbca-0e8c-40df-94f1-98ce939b3b11","type":"procode","props":{"code":"transition:\n transform 0.4s,\n box-shadow 0.4s,\n border-radius 0.4s;","language":"javascript","filename":"","files":"[{\"id\":\"8hkmacsol\",\"name\":\"code\",\"code\":\"transition:\\n transform 0.4s,\\n box-shadow 0.4s,\\n border-radius 0.4s;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb72cf3e-f02b-457b-a4c0-3cd64d2fd0bf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The active press transition is faster using ","styles":{}},{"type":"text","text":"0.2s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"abba5bac-b1d9-44e6-b2e7-b3a15705fd8d","type":"procode","props":{"code":"transition:\n transform 0.2s,\n box-shadow 0.2s;","language":"javascript","filename":"","files":"[{\"id\":\"31xqdaufw\",\"name\":\"code\",\"code\":\"transition:\\n transform 0.2s,\\n box-shadow 0.2s;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d570310a-5f8d-4b92-b269-3bf6eae1e753","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes hover smooth, but click response faster.","styles":{}}],"children":[]},{"id":"6e8c80d3-8f8c-4317-a78e-71a234dc57d4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"bbdc9e5f-2f15-415d-8cf8-2c86249712b0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For users who prefer reduced motion, the transition is disabled.","styles":{}}],"children":[]},{"id":"f6888166-9076-4e43-8658-6a7c1eed9000","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .jump-shadow-button {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"eqafty9mb\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .jump-shadow-button {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0d61c10-c916-43cd-99b5-51771bedb7b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]