Inset Hover Button

[{"id":"abea83b0-b0a1-4e07-bcdf-013ebffc299a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"239a0ef6-fcf3-4551-a9ac-7ac994fd6068","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.purple-inset-button {\\n width: 10rem;\\n height: 3rem;\\n background: #ffffff;\\n cursor: pointer;\\n border-radius: 1.5rem;\\n border: 2px solid #9748ff;\\n box-shadow: inset 0 -2px 0 1px #9748ff;\\n transition:\\n background-color 300ms ease-in-out,\\n transform 200ms ease-in-out;\\n}\\n\\n.purple-inset-text {\\n font-weight: 500;\\n color: #333333;\\n transition: color 300ms ease-in-out;\\n}\\n\\n.purple-inset-button:hover {\\n background: #9748ff;\\n}\\n\\n.purple-inset-button:hover .purple-inset-text {\\n color: #ffffff;\\n}\\n\\n.purple-inset-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .purple-inset-button,\\n .purple-inset-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Inset Hover 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":"14c22f86-8f91-45e8-b70a-b2d1e34eff0c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"f6ca1680-6a99-42a0-9dc4-a615647d2952","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5dc47528-a25e-40dc-b0d2-41f917b5149e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"334abfbf-9284-40d9-ab24-7941590bdfbc","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.purple-inset-button {\\n width: 10rem;\\n height: 3rem;\\n background: #ffffff;\\n cursor: pointer;\\n border-radius: 1.5rem;\\n border: 2px solid #9748ff;\\n box-shadow: inset 0 -2px 0 1px #9748ff;\\n transition:\\n background-color 300ms ease-in-out,\\n transform 200ms ease-in-out;\\n}\\n\\n.purple-inset-text {\\n font-weight: 500;\\n color: #333333;\\n transition: color 300ms ease-in-out;\\n}\\n\\n.purple-inset-button:hover {\\n background: #9748ff;\\n}\\n\\n.purple-inset-button:hover .purple-inset-text {\\n color: #ffffff;\\n}\\n\\n.purple-inset-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .purple-inset-button,\\n .purple-inset-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07a694e3-6898-4248-9b31-5854a935e08f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f0777d23-8308-44f3-8d80-4dcd59ef2092","type":"divider","props":{},"children":[]},{"id":"b0137dc5-4a76-45fe-91bb-ed0096eb819a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"34a6f1f0-3fe6-490f-9167-31cd887e40b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses one button element and one text span.","styles":{}}],"children":[]},{"id":"46e4f6d6-36fd-4983-943e-cd3a60da5612","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"zk9zb5sg0\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8844c94b-ec39-4587-aea7-02a1e65706dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button controls the background, border, radius, and inset shadow.\n\nThe span controls the text color.","styles":{}}],"children":[]},{"id":"3f65ce4d-84ef-4c64-92e5-c5031ebc51ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tailwind Conversion","styles":{}}],"children":[]},{"id":"82bfdb4c-8cde-476d-9c13-139e9a11dc00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original Tailwind size:","styles":{}}],"children":[]},{"id":"ad83fd66-3b9e-4de3-bb34-15928c49c7d3","type":"procode","props":{"code":"w-40 h-12","language":"javascript","filename":"","files":"[{\"id\":\"5hbc44b5r\",\"name\":\"code\",\"code\":\"w-40 h-12\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf4c844b-2bea-46f3-9cea-08e35a27ec38","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"becomes:","styles":{}}],"children":[]},{"id":"da891c98-20ae-448b-b109-f234c545dd39","type":"procode","props":{"code":"width: 10rem;\nheight: 3rem;","language":"javascript","filename":"","files":"[{\"id\":\"qqpkf6bbu\",\"name\":\"code\",\"code\":\"width: 10rem;\\nheight: 3rem;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5a97bfd0-8c0e-4c97-8c38-84643613f7c4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Border","styles":{}}],"children":[]},{"id":"4648a2a1-3a73-47e1-bfd5-c7d91bd86d41","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The border color uses the original purple hex.","styles":{}}],"children":[]},{"id":"61470e9a-ee2e-4eec-b62e-deda164afc8c","type":"procode","props":{"code":"border: 2px solid #9748ff;","language":"javascript","filename":"","files":"[{\"id\":\"vy6pcoo9m\",\"name\":\"code\",\"code\":\"border: 2px solid #9748ff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63769a5c-1b40-4088-a70e-a861642cc341","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Inset Shadow","styles":{}}],"children":[]},{"id":"a075bf9c-824e-4bb3-b4c5-6f39e655cba3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original Tailwind shadow:","styles":{}}],"children":[]},{"id":"ddb9b5ab-aea6-469c-9303-893d941a2909","type":"procode","props":{"code":"shadow-[inset_0px_-2px_0px_1px_#9748FF]","language":"javascript","filename":"","files":"[{\"id\":\"qx481qjnw\",\"name\":\"code\",\"code\":\"shadow-[inset_0px_-2px_0px_1px_#9748FF]\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a178659-eb1d-4458-a23c-79dbc7fc4ec1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"becomes:","styles":{}}],"children":[]},{"id":"4512449a-84b8-428c-80c5-2b1b57150404","type":"procode","props":{"code":"box-shadow: inset 0 -2px 0 1px #9748ff;","language":"javascript","filename":"","files":"[{\"id\":\"hpdomha7f\",\"name\":\"code\",\"code\":\"box-shadow: inset 0 -2px 0 1px #9748ff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"28657b73-82f7-474d-acb6-45baf680b489","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Background","styles":{}}],"children":[]},{"id":"0184c3c3-e39d-4fb6-9439-d004e9691894","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button starts white.","styles":{}}],"children":[]},{"id":"f13bc619-d2b2-4d30-8b21-867d7e85a028","type":"procode","props":{"code":"background: #ffffff;","language":"javascript","filename":"","files":"[{\"id\":\"poh1b16b6\",\"name\":\"code\",\"code\":\"background: #ffffff;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7cef8b82-aacb-4051-b758-8027054b7b00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, it changes to purple.","styles":{}}],"children":[]},{"id":"05bc37c5-2581-447a-a919-f5d24aa80df9","type":"procode","props":{"code":".purple-inset-button:hover {\n background: #9748ff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"r2jb37t8i\",\"name\":\"code\",\"code\":\".purple-inset-button:hover {\\n background: #9748ff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f72612c0-7685-4cd1-9f47-9653e18bf59e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Color","styles":{}}],"children":[]},{"id":"d2158e68-4d2c-45ce-b585-f06f0176a688","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text starts dark gray.","styles":{}}],"children":[]},{"id":"4dc0dded-fa35-4bdc-965a-4b3d8f22b77e","type":"procode","props":{"code":"color: #333333;","language":"javascript","filename":"","files":"[{\"id\":\"aifrhkljl\",\"name\":\"code\",\"code\":\"color: #333333;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4497535a-438a-45f8-bd56-5659c43bc9cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the text becomes white.","styles":{}}],"children":[]},{"id":"146bc13d-af09-48ca-81c2-789224a5866f","type":"procode","props":{"code":".purple-inset-button:hover .purple-inset-text {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rv0c8m3t4\",\"name\":\"code\",\"code\":\".purple-inset-button:hover .purple-inset-text {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"09756d9b-ca4c-47b7-96b1-449250f4c9e9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]