Skew Press Button

[{"id":"b621611c-0eaa-4817-90e7-5511056a2543","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2ae2f0bf-0389-4e33-a699-c4fca3cdfb50","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: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.skew-press-button {\\n --button-bg: #644dff;\\n --button-border: #4836bb;\\n --button-shadow: #654dff63;\\n\\n cursor: pointer;\\n width: 184px;\\n height: 48px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 1rem;\\n\\n font-size: 1.125em;\\n font-weight: 800;\\n letter-spacing: 2px;\\n color: #fff;\\n\\n background: var(--button-bg);\\n border: 2px solid var(--button-border);\\n border-radius: 0.75rem;\\n box-shadow: 0 8px 0 var(--button-border);\\n\\n transform: skew(-10deg);\\n transition: all 0.1s ease;\\n filter: drop-shadow(0 15px 20px var(--button-shadow));\\n}\\n\\n.skew-press-button:active {\\n letter-spacing: 0;\\n transform: skew(-10deg) translateY(8px);\\n box-shadow: 0 0 0 var(--button-shadow);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .skew-press-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Skew Press 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":"28856fb5-cc6f-4835-b5c2-4c5678c3cce2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"92390eb3-fbe8-400b-9be2-14e93ccb4ffa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"783eb34c-8970-4ff0-8fb4-091144c63d8c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"4e9424f4-a266-4b7a-8bd1-067209e94fdc","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e1d2110-0f61-47d7-8aa4-ef1d31e1c71c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"10b279e8-a9db-4b78-9cd8-93757a323302","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: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.skew-press-button {\\n --button-bg: #644dff;\\n --button-border: #4836bb;\\n --button-shadow: #654dff63;\\n\\n cursor: pointer;\\n width: 184px;\\n height: 48px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 1rem;\\n\\n font-size: 1.125em;\\n font-weight: 800;\\n letter-spacing: 2px;\\n color: #fff;\\n\\n background: var(--button-bg);\\n border: 2px solid var(--button-border);\\n border-radius: 0.75rem;\\n box-shadow: 0 8px 0 var(--button-border);\\n\\n transform: skew(-10deg);\\n transition: all 0.1s ease;\\n filter: drop-shadow(0 15px 20px var(--button-shadow));\\n}\\n\\n.skew-press-button:active {\\n letter-spacing: 0;\\n transform: skew(-10deg) translateY(8px);\\n box-shadow: 0 0 0 var(--button-shadow);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .skew-press-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7c2ca69a-1930-4b9c-8b92-f36a90893417","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"f0a920c1-fd2e-4881-aadd-59cc0f8f40c7","type":"divider","props":{},"children":[]},{"id":"ba2d27a1-dba9-44cb-a7fc-f955d9acd0ed","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"1110917a-8962-48a1-95ae-c1250434a0e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The component is ","styles":{}},{"type":"text","text":"Skew Press Button","styles":{"code":true}},{"type":"text","text":". It uses one ","styles":{}},{"type":"text","text":"