Perspective Tilt Button

[{"id":"9426d2f5-c3c4-4725-be27-08e37a5e54bf","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.perspective-tilt-button {\\n --border-radius: 28px;\\n --button-bg: #3a3544;\\n --button-color: #d0bcff;\\n --tilt-deg: 30deg;\\n\\n perspective: 200px;\\n transform-origin: top center;\\n max-width: 500px;\\n text-align: center;\\n outline: none;\\n border: none;\\n background: none;\\n cursor: pointer;\\n}\\n\\n.perspective-tilt-face {\\n transform-style: preserve-3d;\\n transform: rotateY(var(--tilt-deg));\\n transition: transform 800ms ease-in-out;\\n border-radius: var(--border-radius);\\n font-style: normal;\\n border: none;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 24px;\\n font-weight: 500;\\n letter-spacing: 0.5px;\\n padding: 18px 34px;\\n background: var(--button-bg);\\n color: var(--button-color);\\n}\\n\\n.perspective-tilt-button:hover .perspective-tilt-face {\\n transform: rotateY(calc(-1 * var(--tilt-deg)));\\n}\\n\\n.perspective-tilt-button:active .perspective-tilt-face {\\n transform: rotateY(calc(-1 * var(--tilt-deg) / 3));\\n}\\n\\n.perspective-tilt-button:focus .perspective-tilt-face {\\n border: 1px solid var(--button-color);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .perspective-tilt-face {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Perspective Tilt 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":"7ead09e4-e7eb-407a-8b22-6b87a19f6c0b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b3312fa7-bb6a-4f8c-89ef-e051b1a8d3d9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"8d40c050-cedd-4c20-8c4b-b7053b21dc24","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b85957f8-88eb-4312-baaa-048f18678111","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"c1ae78a1-a9a0-4d33-88d6-2bb46959d675","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.perspective-tilt-button {\\n --border-radius: 28px;\\n --button-bg: #3a3544;\\n --button-color: #d0bcff;\\n --tilt-deg: 30deg;\\n\\n perspective: 200px;\\n transform-origin: top center;\\n max-width: 500px;\\n text-align: center;\\n outline: none;\\n border: none;\\n background: none;\\n cursor: pointer;\\n}\\n\\n.perspective-tilt-face {\\n transform-style: preserve-3d;\\n transform: rotateY(var(--tilt-deg));\\n transition: transform 800ms ease-in-out;\\n border-radius: var(--border-radius);\\n font-style: normal;\\n border: none;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 24px;\\n font-weight: 500;\\n letter-spacing: 0.5px;\\n padding: 18px 34px;\\n background: var(--button-bg);\\n color: var(--button-color);\\n}\\n\\n.perspective-tilt-button:hover .perspective-tilt-face {\\n transform: rotateY(calc(-1 * var(--tilt-deg)));\\n}\\n\\n.perspective-tilt-button:active .perspective-tilt-face {\\n transform: rotateY(calc(-1 * var(--tilt-deg) / 3));\\n}\\n\\n.perspective-tilt-button:focus .perspective-tilt-face {\\n border: 1px solid var(--button-color);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .perspective-tilt-face {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aa09af73-a770-4ec2-8cfc-8312e29c665a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"9ee61261-c684-4045-a7b2-73bc1476a336","type":"divider","props":{},"children":[]},{"id":"4a7753d3-dd34-4fcc-9766-58cae756742e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"ae177b1c-3ca0-421e-840f-7cd3dea68633","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure","styles":{}}],"children":[]},{"id":"17b45bd9-93cd-4f7f-b02e-1abb3d64efea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses one outer button and one inner span.","styles":{}}],"children":[]},{"id":"a497286a-a741-44db-8b74-f1aab34f36dd","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"sj8hntjis\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0063622d-e218-4843-8188-5c207c28e512","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The outer button creates the 3D perspective.\n\nThe inner span is the visible button face that rotates.","styles":{}}],"children":[]},{"id":"36cc1f8c-9241-42b3-80b1-921f433d319e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"7a62bfbd-62ac-493b-b2dc-6ffbd470038b","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 centers the button in the viewport.","styles":{}}],"children":[]},{"id":"314c278f-2ebf-4eaf-b385-97672bfe9258","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\":\"a4ef1khae\",\"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":"e163116b-b6bd-4886-8082-8cfed68f6564","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size Control","styles":{}}],"children":[]},{"id":"0f00c821-2cdc-48cd-98e4-3b8732098637","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button size is controlled from the inner span.","styles":{}}],"children":[]},{"id":"196c3827-0bfb-451c-a296-eaa1c3dfb846","type":"procode","props":{"code":"font-size: 24px;\npadding: 18px 34px;","language":"javascript","filename":"","files":"[{\"id\":\"1y268yivy\",\"name\":\"code\",\"code\":\"font-size: 24px;\\npadding: 18px 34px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc433634-b56e-44a3-b814-30ab5abef649","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"To make it bigger, increase those two values.","styles":{}}],"children":[]},{"id":"eeeb6fe4-4bb6-4d16-b35b-c2d3bd0af2eb","type":"procode","props":{"code":"font-size: 28px;\npadding: 22px 42px;","language":"javascript","filename":"","files":"[{\"id\":\"bwhbz924w\",\"name\":\"code\",\"code\":\"font-size: 28px;\\npadding: 22px 42px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"05c6673a-aabf-4b58-9d9b-1be51ac92a75","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color Control","styles":{}}],"children":[]},{"id":"5890e272-ac88-4366-a448-c936c58b2a7a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The colors are controlled using CSS variables.","styles":{}}],"children":[]},{"id":"6e8866ad-3f45-4273-a808-915ea3d01342","type":"procode","props":{"code":"--button-bg: #3a3544;\n--button-color: #d0bcff;","language":"javascript","filename":"","files":"[{\"id\":\"6x64350l9\",\"name\":\"code\",\"code\":\"--button-bg: #3a3544;\\n--button-color: #d0bcff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7b5ac016-84aa-4cc6-a2db-7ab49181b2d2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"--button-bg","styles":{"code":true}},{"type":"text","text":" controls the button background.\n\n","styles":{}},{"type":"text","text":"--button-color","styles":{"code":true}},{"type":"text","text":" controls the text and focus border color.","styles":{}}],"children":[]},{"id":"7c46eec3-be78-4989-8fa0-1f197c7abd37","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Perspective","styles":{}}],"children":[]},{"id":"5575a6ff-b70a-4570-898c-a250903c03d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The outer button creates depth using ","styles":{}},{"type":"text","text":"perspective","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"df9b8090-d0b4-4a4b-b45a-10caf6243dfb","type":"procode","props":{"code":".perspective-tilt-button {\n perspective: 200px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yvm9pjshj\",\"name\":\"code\",\"code\":\".perspective-tilt-button {\\n perspective: 200px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e887483-da13-4daa-8252-aebec80df7b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The inner span preserves the 3D transform.","styles":{}}],"children":[]},{"id":"63aa77b8-5b70-43bc-ace0-d7b3d145afbc","type":"procode","props":{"code":".perspective-tilt-face {\n transform-style: preserve-3d;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jka9t3yfl\",\"name\":\"code\",\"code\":\".perspective-tilt-face {\\n transform-style: preserve-3d;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b509d456-3d37-48cf-9fdc-72fd9927cca3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Tilt","styles":{}}],"children":[]},{"id":"1174b64b-5ff8-4a0c-a18e-e608676d9532","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button starts tilted using ","styles":{}},{"type":"text","text":"rotateY","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"91d17b4f-81a6-4541-892b-1dbf42ecc6c6","type":"procode","props":{"code":"transform: rotateY(var(--tilt-deg));","language":"javascript","filename":"","files":"[{\"id\":\"gywjo9zpq\",\"name\":\"code\",\"code\":\"transform: rotateY(var(--tilt-deg));\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ba0118e0-0fd9-4c98-90e0-f284c1664cd6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation","styles":{}}],"children":[]},{"id":"cb268028-3e43-4660-8798-cb4b3ee224be","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the button rotates to the opposite side.","styles":{}}],"children":[]},{"id":"c3b20bbe-4abd-4358-9d0d-fc8ae8d30e2d","type":"procode","props":{"code":".perspective-tilt-button:hover .perspective-tilt-face {\n transform: rotateY(calc(-1 * var(--tilt-deg)));\n}","language":"javascript","filename":"","files":"[{\"id\":\"xtpbud5c2\",\"name\":\"code\",\"code\":\".perspective-tilt-button:hover .perspective-tilt-face {\\n transform: rotateY(calc(-1 * var(--tilt-deg)));\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9277b80-2094-4ada-90f2-f97674f4e702","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Animation","styles":{}}],"children":[]},{"id":"ee9c16cc-f2d5-4044-af83-c4fe7d949424","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the tilt becomes smaller.","styles":{}}],"children":[]},{"id":"2970be98-be3e-4d2e-aac4-73f312616ab6","type":"procode","props":{"code":".perspective-tilt-button:active .perspective-tilt-face {\n transform: rotateY(calc(-1 * var(--tilt-deg) / 3));\n}","language":"javascript","filename":"","files":"[{\"id\":\"t47j4z2ba\",\"name\":\"code\",\"code\":\".perspective-tilt-button:active .perspective-tilt-face {\\n transform: rotateY(calc(-1 * var(--tilt-deg) / 3));\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7643a4c7-d0b6-437e-9a52-7d8b10f409c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus State","styles":{}}],"children":[]},{"id":"4df3d29a-d265-4ea8-91bf-1195285dc6f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the button is focused, it shows a small border.","styles":{}}],"children":[]},{"id":"8b4835ee-fbce-4508-a22c-8a661f0fc568","type":"procode","props":{"code":".perspective-tilt-button:focus .perspective-tilt-face {\n border: 1px solid var(--button-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"e39io6kjm\",\"name\":\"code\",\"code\":\".perspective-tilt-button:focus .perspective-tilt-face {\\n border: 1px solid var(--button-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a5433fb0-da01-4934-b5e4-69e9c26da3e9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"921508b3-0d4d-4f6a-8641-67da712dc5bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For users who prefer reduced motion, the transition is removed.","styles":{}}],"children":[]},{"id":"0ff12684-e0fc-4925-9d53-8aae68c4d107","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .perspective-tilt-face {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"gx88ura2b\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .perspective-tilt-face {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b32223eb-d9b4-49c8-97c2-86d4869bac21","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]