Arrow 3D Icon Button

[{"id":"c0f790fd-6c99-4598-b313-9827535b82fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9995016f-83a6-4b23-b1c5-292b692a188e","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, sans-serif;\\n}\\n\\n.page-center {\\n width: 100%;\\n min-height: 100vh;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\\n\\n.arrow-button-wrap {\\n width: 56px;\\n height: 56px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-radius: 50%;\\n transform-style: preserve-3d;\\n transition:\\n transform 0.5s ease-in-out,\\n background-color 0.5s ease-in-out,\\n box-shadow 0.5s ease-in-out;\\n}\\n\\n.arrow-button-wrap:hover {\\n background-color: #ffffff;\\n transform: perspective(180px) rotateX(60deg) translateY(2px);\\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);\\n}\\n\\n.arrow-button {\\n width: 56px;\\n height: 56px;\\n border: none;\\n outline: none;\\n cursor: pointer;\\n background: transparent;\\n color: #000000;\\n border-radius: 50%;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n transform-style: preserve-3d;\\n transition:\\n transform 0.5s ease-in-out,\\n color 0.5s ease-in-out;\\n}\\n\\n.arrow-button:hover {\\n transform: translate3d(0, 0, 15px) perspective(180px) rotateX(-35deg)\\n translateY(2px);\\n}\\n\\n.arrow-icon {\\n width: 26px;\\n height: 26px;\\n display: block;\\n}\\n\\n.arrow-button:active {\\n transform: translate3d(0, 0, 10px) perspective(180px) rotateX(-20deg)\\n translateY(3px) scale(0.94);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .arrow-button-wrap,\\n .arrow-button {\\n transition: none;\\n }\\n\\n .arrow-button-wrap:hover,\\n .arrow-button:hover,\\n .arrow-button:active {\\n transform: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Arrow 3D Icon Button\\n \\n \\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":"2eb01000-301d-46ae-84e7-f2fe34cfa8ce","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"adbe0ef4-9062-4752-85f4-89003b053abe","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"12a04703-5938-4efd-a80b-e4a5120b43f6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"3480c977-c2a6-4a6b-8313-df868c508a10","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, sans-serif;\\n}\\n\\n.page-center {\\n width: 100%;\\n min-height: 100vh;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\\n\\n.arrow-button-wrap {\\n width: 56px;\\n height: 56px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-radius: 50%;\\n transform-style: preserve-3d;\\n transition:\\n transform 0.5s ease-in-out,\\n background-color 0.5s ease-in-out,\\n box-shadow 0.5s ease-in-out;\\n}\\n\\n.arrow-button-wrap:hover {\\n background-color: #ffffff;\\n transform: perspective(180px) rotateX(60deg) translateY(2px);\\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);\\n}\\n\\n.arrow-button {\\n width: 56px;\\n height: 56px;\\n border: none;\\n outline: none;\\n cursor: pointer;\\n background: transparent;\\n color: #000000;\\n border-radius: 50%;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n transform-style: preserve-3d;\\n transition:\\n transform 0.5s ease-in-out,\\n color 0.5s ease-in-out;\\n}\\n\\n.arrow-button:hover {\\n transform: translate3d(0, 0, 15px) perspective(180px) rotateX(-35deg)\\n translateY(2px);\\n}\\n\\n.arrow-icon {\\n width: 26px;\\n height: 26px;\\n display: block;\\n}\\n\\n.arrow-button:active {\\n transform: translate3d(0, 0, 10px) perspective(180px) rotateX(-20deg)\\n translateY(3px) scale(0.94);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .arrow-button-wrap,\\n .arrow-button {\\n transition: none;\\n }\\n\\n .arrow-button-wrap:hover,\\n .arrow-button:hover,\\n .arrow-button:active {\\n transform: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1043dbfa-be95-476d-b9df-4657beac660c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3666ff47-3cce-40f9-aa81-61fba7578020","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9795544c-b701-4ee2-9c0f-daf6efc020d5","type":"divider","props":{},"children":[]},{"id":"eee5e57c-f022-47f4-bcfd-e9ee640b601c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"3079c915-89bf-437d-aa79-d82529f5776b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"99bb0025-3133-406c-bc24-0345c48bf6af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The main structure is:","styles":{}}],"children":[]},{"id":"70c02dd3-b2de-4f2c-9b73-190ba0f71a98","type":"procode","props":{"code":"

\n \n

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

\\n

\\n \\n

\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7cca27cb-4fd2-4f0a-bf27-a7526b7622f6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"868628a7-e8c7-4d8f-a567-93f2c5008815","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":".page-center","styles":{"code":true}},{"type":"text","text":" makes the button stay exactly in the center of the viewport.","styles":{}}],"children":[]},{"id":"d262167c-638d-4d39-978b-333750801d38","type":"procode","props":{"code":".page-center {\n width: 100%;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bjfsoq073\",\"name\":\"code\",\"code\":\".page-center {\\n width: 100%;\\n min-height: 100vh;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3c5ec994-3827-40da-a99d-5dd4b039ea6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Container","styles":{}}],"children":[]},{"id":"184d2464-06b4-45fa-84ea-128296f2471c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":".arrow-button-wrap","styles":{"code":true}},{"type":"text","text":" is the outer circular container. It controls the 3D hover tilt and shadow.","styles":{}}],"children":[]},{"id":"38a38806-f313-42d0-8c76-cd9bbea85602","type":"procode","props":{"code":".arrow-button-wrap {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n transform-style: preserve-3d;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hr0oz5mpb\",\"name\":\"code\",\"code\":\".arrow-button-wrap {\\n width: 56px;\\n height: 56px;\\n border-radius: 50%;\\n transform-style: preserve-3d;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"053663e3-047e-454c-9754-4fd5aa18e776","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation","styles":{}}],"children":[]},{"id":"631d080d-168d-4532-8b80-22f165c0d67c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When hovering the wrapper, it rotates forward using perspective and ","styles":{}},{"type":"text","text":"rotateX","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"e013621a-0907-46dc-a2b7-ca266ddce5ab","type":"procode","props":{"code":".arrow-button-wrap:hover {\n transform: perspective(180px) rotateX(60deg) translateY(2px);\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);\n}","language":"javascript","filename":"","files":"[{\"id\":\"0tkmjedy4\",\"name\":\"code\",\"code\":\".arrow-button-wrap:hover {\\n transform: perspective(180px) rotateX(60deg) translateY(2px);\\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc9917bb-e5bd-46ed-a399-19872f8877e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Lift","styles":{}}],"children":[]},{"id":"d3d2c1c5-5c42-4a7c-a909-63d030614a6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The inner button moves forward on hover using ","styles":{}},{"type":"text","text":"translate3d","styles":{"code":true}},{"type":"text","text":". This creates the lifted 3D icon effect.","styles":{}}],"children":[]},{"id":"a41c6ad7-62ad-4cb9-8968-b470f1754f22","type":"procode","props":{"code":".arrow-button:hover {\n transform: translate3d(0, 0, 15px) perspective(180px) rotateX(-35deg)\n translateY(2px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"plwdpzmt4\",\"name\":\"code\",\"code\":\".arrow-button:hover {\\n transform: translate3d(0, 0, 15px) perspective(180px) rotateX(-35deg)\\n translateY(2px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4c1e7d62-26ea-44df-a74b-6ec1b2ef711d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon","styles":{}}],"children":[]},{"id":"aa0bda75-ebbc-4336-a8d4-759d511192d1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The SVG uses ","styles":{}},{"type":"text","text":"currentColor","styles":{"code":true}},{"type":"text","text":", so the arrow follows the button text color.","styles":{}}],"children":[]},{"id":"9d755b26-6cb0-4e13-9a09-169a0ad69fdc","type":"procode","props":{"code":".arrow-button {\n color: #000000;\n}\n\n.arrow-icon {\n width: 26px;\n height: 26px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"u2eqxj9mv\",\"name\":\"code\",\"code\":\".arrow-button {\\n color: #000000;\\n}\\n\\n.arrow-icon {\\n width: 26px;\\n height: 26px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0191ee1c-f888-4fe4-a0be-be9ed7b108ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press","styles":{}}],"children":[]},{"id":"26c77d87-9c1d-4ef5-a2eb-443743e25d49","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicking, the button scales down slightly.","styles":{}}],"children":[]},{"id":"662db722-3b34-4ced-bef9-7735ae3f655b","type":"procode","props":{"code":".arrow-button:active {\n transform: translate3d(0, 0, 10px) perspective(180px) rotateX(-20deg)\n translateY(3px) scale(0.94);\n}","language":"javascript","filename":"","files":"[{\"id\":\"bsrc7zffw\",\"name\":\"code\",\"code\":\".arrow-button:active {\\n transform: translate3d(0, 0, 10px) perspective(180px) rotateX(-20deg)\\n translateY(3px) scale(0.94);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75f898a5-ac27-4983-986f-8a967e7d3e03","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"e599ef4d-5d53-4b94-9936-35fc336e3a8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The media query removes transitions and transforms for users who prefer less motion.","styles":{}}],"children":[]},{"id":"8ff9216b-ae4b-4b5f-87e0-0d85c0d94335","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .arrow-button-wrap,\n .arrow-button {\n transition: none;\n }\n\n .arrow-button-wrap:hover,\n .arrow-button:hover,\n .arrow-button:active {\n transform: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"p9egugd7u\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .arrow-button-wrap,\\n .arrow-button {\\n transition: none;\\n }\\n\\n .arrow-button-wrap:hover,\\n .arrow-button:hover,\\n .arrow-button:active {\\n transform: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ac708ecf-c3c1-4cbd-9cd7-0081829283ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Preview","styles":{}}],"children":[]},{"id":"e94e31ad-63ac-4b2c-b34d-c88caba25d48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Because ","styles":{}},{"type":"text","text":"package.json","styles":{"code":true}},{"type":"text","text":" has no dev script and no dependency, preview it by opening ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":" directly in the browser or Sandpack preview.","styles":{}}],"children":[]},{"id":"d9933994-cfa1-4e5d-9a53-7f0cb50da30e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]