Center Horizontal Fill Button

[{"id":"1df4e066-55c4-47da-afdb-d62a2993474e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c9133c66-de7c-4786-abd4-d41cf98bbe2b","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 font-family: Arial, sans-serif;\\n background: #000;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.fill-button {\\n position: relative;\\n border: none;\\n outline: none;\\n cursor: pointer;\\n\\n padding: 16px 28px;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n color: #111111;\\n\\n font-size: 16px;\\n font-weight: 600;\\n\\n overflow: hidden;\\n isolation: isolate;\\n\\n transform: translateZ(0);\\n}\\n\\n.fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n\\n top: 0;\\n left: 0;\\n\\n width: 100%;\\n height: 100%;\\n\\n background: #679267;\\n\\n /* fill is NOT rounded */\\n border-radius: 0;\\n\\n /* horizontal fill from center */\\n transform: scaleX(0);\\n transform-origin: center;\\n\\n transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);\\n\\n z-index: 0;\\n}\\n\\n.fill-button span {\\n position: relative;\\n z-index: 1;\\n\\n display: inline-block;\\n transition: color 0.25s ease;\\n}\\n\\n.fill-button:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.fill-button:hover span {\\n color: #ffffff;\\n}\\n\\n.fill-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .fill-button::before,\\n .fill-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Center Horizontal Fill 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\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/styles.css","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"57","mobileSplitRatio":"50"},"children":[]},{"id":"0a1d856d-b103-4a4b-8820-57302155e79d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7c4c2649-4f3f-47df-a1d7-ae1dd85379b5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"53b1b050-6a2a-4d5e-bfd4-efed1441b63a","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"29614eb2-a556-4e69-a72e-8d53dbe5ed72","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"a057a4a9-3dfd-4542-8d85-12e49d1fa544","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 font-family: Arial, sans-serif;\\n background: #000;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.fill-button {\\n position: relative;\\n border: none;\\n outline: none;\\n cursor: pointer;\\n\\n padding: 16px 28px;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n color: #111111;\\n\\n font-size: 16px;\\n font-weight: 600;\\n\\n overflow: hidden;\\n isolation: isolate;\\n\\n transform: translateZ(0);\\n}\\n\\n.fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n\\n top: 0;\\n left: 0;\\n\\n width: 100%;\\n height: 100%;\\n\\n background: #679267;\\n\\n /* fill is NOT rounded */\\n border-radius: 0;\\n\\n /* horizontal fill from center */\\n transform: scaleX(0);\\n transform-origin: center;\\n\\n transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);\\n\\n z-index: 0;\\n}\\n\\n.fill-button span {\\n position: relative;\\n z-index: 1;\\n\\n display: inline-block;\\n transition: color 0.25s ease;\\n}\\n\\n.fill-button:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.fill-button:hover span {\\n color: #ffffff;\\n}\\n\\n.fill-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .fill-button::before,\\n .fill-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86bf24f5-1475-496f-97e2-676dba9efda4","type":"divider","props":{},"children":[]},{"id":"01f65b61-3f26-4770-ae45-efb83edd4d57","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"0ff6f6c4-55b8-4044-9acf-302e557b6ac9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n\n","styles":{"bold":true}},{"type":"text","text":"The orange fill expands horizontally from the center to the left and right.","styles":{}}],"children":[]},{"id":"420983df-701e-40f9-85ce-1c03483c3856","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Mouse Leave\n\n","styles":{"bold":true}},{"type":"text","text":"The orange fill reverses back into the center.","styles":{}}],"children":[]},{"id":"cf01af1a-034c-43ac-96cd-458183115404","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code","styles":{"bold":true}}],"children":[]},{"id":"2de5b5bc-710d-4812-9dde-5d5f8a78a5ce","type":"procode","props":{"code":".fill-button::before {\n border-radius: 0;\n transform: scaleX(0);\n transform-origin: center;\n}\n\n.fill-button:hover::before {\n transform: scaleX(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"lbitx2lkf\",\"name\":\"code\",\"code\":\".fill-button::before {\\n border-radius: 0;\\n transform: scaleX(0);\\n transform-origin: center;\\n}\\n\\n.fill-button:hover::before {\\n transform: scaleX(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d491d497-6ea3-4c8b-ba35-bb89fd3a42d2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Main Fix\n\n","styles":{"bold":true}},{"type":"text","text":"The button stays rounded, but the fill itself is a flat rectangle, not rounded.","styles":{}}],"children":[]},{"id":"eef03be5-41a1-4190-aec0-1552d94002aa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]