Dot scale fill center Button

[{"id":"6a002faf-80b2-4633-8f8d-83caf1830a39","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0f75f6a1-17d3-46ae-b7c9-0e39f1eee13c","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: #111111;\\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-fill-button {\\n cursor: pointer;\\n position: relative;\\n padding: 10px 24px;\\n font-size: 18px;\\n color: #a855f7;\\n border: 2px solid #a855f7;\\n border-radius: 34px;\\n background-color: transparent;\\n font-weight: 600;\\n overflow: hidden;\\n isolation: isolate;\\n transition:\\n color 0.3s cubic-bezier(0.23, 1, 0.32, 1),\\n transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),\\n box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.purple-fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n margin: auto;\\n width: 50px;\\n height: 50px;\\n border-radius: inherit;\\n background-color: #a855f7;\\n transform: scale(0);\\n z-index: -1;\\n transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.purple-fill-button:hover::before {\\n transform: scale(3);\\n}\\n\\n.purple-fill-button:hover {\\n color: #ffffff;\\n transform: scale(1.1);\\n box-shadow: 0 0 20px rgba(168, 85, 247, 0.45);\\n}\\n\\n.purple-fill-button:active {\\n transform: scale(1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .purple-fill-button,\\n .purple-fill-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Dot scale fill center 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":"b5972c36-dcf0-4e86-b78a-cb6e3ab490cf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"296c6857-4004-4502-9c97-f7fd34d28195","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"6fda2d52-e476-477b-b4e0-e85c51be0abb","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b76e9cbf-a372-4864-9943-68cd713ad47b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"c15ef984-da60-4cc7-804a-ad784eb5a093","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: #111111;\\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-fill-button {\\n cursor: pointer;\\n position: relative;\\n padding: 10px 24px;\\n font-size: 18px;\\n color: #a855f7;\\n border: 2px solid #a855f7;\\n border-radius: 34px;\\n background-color: transparent;\\n font-weight: 600;\\n overflow: hidden;\\n isolation: isolate;\\n transition:\\n color 0.3s cubic-bezier(0.23, 1, 0.32, 1),\\n transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),\\n box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.purple-fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n margin: auto;\\n width: 50px;\\n height: 50px;\\n border-radius: inherit;\\n background-color: #a855f7;\\n transform: scale(0);\\n z-index: -1;\\n transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.purple-fill-button:hover::before {\\n transform: scale(3);\\n}\\n\\n.purple-fill-button:hover {\\n color: #ffffff;\\n transform: scale(1.1);\\n box-shadow: 0 0 20px rgba(168, 85, 247, 0.45);\\n}\\n\\n.purple-fill-button:active {\\n transform: scale(1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .purple-fill-button,\\n .purple-fill-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01b74a95-af6c-4ca2-9a33-3f111bd83564","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0752e923-1399-4ebb-a811-f097ffb996f5","type":"divider","props":{},"children":[]},{"id":"29169a6b-eaa2-4f60-85c9-b1f0521fe232","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"6c557e95-b20b-47b6-8310-dc6791fb401a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses one simple HTML element:","styles":{}}],"children":[]},{"id":"8c68a81a-75cd-4982-95ec-3fef5070f575","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"hn396ee09\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"90d6bc7a-4452-40d2-9e76-74064a20ce9d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text is changed from ","styles":{}},{"type":"text","text":"Subscribe","styles":{"code":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"Button","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1e64420c-a5b0-413b-b4bd-04fd8332c9b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper is only used to center the component on the screen.","styles":{}}],"children":[]},{"id":"54f1690b-9423-48bb-a27c-156b0c1b8473","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\":\"fe9jm8zym\",\"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":"c6d7733b-0bf3-4dd1-a51f-61f1d3b350c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n\nThe button starts with a transparent background, purple text, and a purple border.","styles":{}}],"children":[]},{"id":"12ede8df-4628-4c81-b8ef-544965fe993d","type":"procode","props":{"code":".purple-fill-button {\n color: #a855f7;\n border: 2px solid #a855f7;\n background-color: transparent;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yycsyh17u\",\"name\":\"code\",\"code\":\".purple-fill-button {\\n color: #a855f7;\\n border: 2px solid #a855f7;\\n background-color: transparent;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"51c66683-b938-4bf0-9f9c-76da546f3929","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Fill Layer\n\nThe fill animation is made with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"e8b16a5d-27e9-4237-9a82-59256da40938","type":"procode","props":{"code":".purple-fill-button::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n background-color: #a855f7;\n transform: scale(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"5g88csprn\",\"name\":\"code\",\"code\":\".purple-fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n width: 50px;\\n height: 50px;\\n background-color: #a855f7;\\n transform: scale(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c22ecf23-dcb5-4722-b7b8-10c2524e655a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The fill layer starts small in the center of the button.","styles":{}}],"children":[]},{"id":"aeb98e6f-0bd3-4b19-84c9-f1bad9e9db56","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation\n\nWhen the button is hovered, the ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" layer scales up.","styles":{}}],"children":[]},{"id":"797fe678-df14-478f-a389-32e393ab485d","type":"procode","props":{"code":".purple-fill-button:hover::before {\n transform: scale(3);\n}","language":"javascript","filename":"","files":"[{\"id\":\"h1ax5tme9\",\"name\":\"code\",\"code\":\".purple-fill-button:hover::before {\\n transform: scale(3);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ccfe5f4a-7649-4faa-8a12-18581a9d0a6b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the purple color expand from the center until it fills the button.","styles":{}}],"children":[]},{"id":"03875d50-1e68-4bc1-aaa4-05b6c4dba320","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Color Change\n\nThe text changes to white on hover so it stays readable on the purple background.","styles":{}}],"children":[]},{"id":"126ead16-4209-4089-88ed-3aefcaa5f3bb","type":"procode","props":{"code":".purple-fill-button:hover {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0c756y8tb\",\"name\":\"code\",\"code\":\".purple-fill-button:hover {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1ccfef4-c91a-4af5-a0ad-30acaefd55a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Scale\n\nThe button grows slightly when hovered.","styles":{}}],"children":[]},{"id":"4c7889ab-5c0b-4c33-b0e6-e0f4a3d13647","type":"procode","props":{"code":".purple-fill-button:hover {\n transform: scale(1.1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zg0ydyv0l\",\"name\":\"code\",\"code\":\".purple-fill-button:hover {\\n transform: scale(1.1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3e48ee0c-f1c6-40f6-8adb-81352d2415b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Effect\n\nWhen the button is clicked, it returns to normal size so it feels pressed.","styles":{}}],"children":[]},{"id":"0d4dd266-bfc8-4186-b391-c443f5fa9a8a","type":"procode","props":{"code":".purple-fill-button:active {\n transform: scale(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"at2as3xid\",\"name\":\"code\",\"code\":\".purple-fill-button:active {\\n transform: scale(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d1ba855-8728-4703-a7fb-ac8b5732672d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layer Fix\n\n","styles":{}},{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" is used so the ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" layer stays behind the text but still inside the button.","styles":{}}],"children":[]},{"id":"adcf486e-1686-45f3-a7bc-29f9931cf533","type":"procode","props":{"code":".purple-fill-button {\n isolation: isolate;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"w5gqjibx8\",\"name\":\"code\",\"code\":\".purple-fill-button {\\n isolation: isolate;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e3222da5-0472-4f23-8d34-60b48e6f8df3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Motion Safety\n\nThe reduced motion media query removes animation for users who prefer less motion.","styles":{}}],"children":[]},{"id":"7bcbb012-63a2-4255-a946-bd04d2a6500a","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .purple-fill-button,\n .purple-fill-button::before {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"btqkf9hmg\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .purple-fill-button,\\n .purple-fill-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a134b84-03e6-46e4-8b17-d3c60ca3b64a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]