Center Vertical Fill Button

[{"id":"725e8b06-9e92-481f-ac59-87b7331fb2db","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.vertical-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.vertical-fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n\\n background: #679267;\\n\\n /* fill is not rounded */\\n border-radius: 0;\\n\\n /* vertical fill from center */\\n transform: scaleY(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.vertical-fill-button span {\\n position: relative;\\n z-index: 1;\\n display: inline-block;\\n transition: color 0.25s ease;\\n}\\n\\n.vertical-fill-button:hover::before {\\n transform: scaleY(1);\\n}\\n\\n.vertical-fill-button:hover span {\\n color: #ffffff;\\n}\\n\\n.vertical-fill-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .vertical-fill-button::before,\\n .vertical-fill-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Center Vertical 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\"}]","template":"vanilla-ts","activeFile":"/styles.css","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"e4555cfb-97b1-43bf-b1db-ef4f5e8bcccd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"8fc45b40-d9d1-4492-821d-04e6e5b952d6","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2cf59b30-91aa-40ea-8c7d-c2d51329cb70","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"c353a6a7-239e-49ea-9347-8e2200e4ea9a","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.vertical-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.vertical-fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n\\n background: #679267;\\n\\n /* fill is not rounded */\\n border-radius: 0;\\n\\n /* vertical fill from center */\\n transform: scaleY(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.vertical-fill-button span {\\n position: relative;\\n z-index: 1;\\n display: inline-block;\\n transition: color 0.25s ease;\\n}\\n\\n.vertical-fill-button:hover::before {\\n transform: scaleY(1);\\n}\\n\\n.vertical-fill-button:hover span {\\n color: #ffffff;\\n}\\n\\n.vertical-fill-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .vertical-fill-button::before,\\n .vertical-fill-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1344a2c3-3068-4392-81af-f97208cae4aa","type":"divider","props":{},"children":[]},{"id":"29595a78-5ec6-4926-886c-c3214e45ad24","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"29c09902-d9ee-4b75-8d08-4e61f092724c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"4ebaefcd-0e1e-46a7-8364-2d1f05ec84cc","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 starts from the middle and expands vertically to the top and bottom.","styles":{}}],"children":[]},{"id":"df01a23e-d5a8-4de4-abee-e62821079ad0","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":"6a105fd8-0f20-4d6a-8612-285821e599a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code","styles":{"bold":true}}],"children":[]},{"id":"84f6cb2a-3015-4cb8-9bf1-4d7230d3b9c0","type":"procode","props":{"code":".vertical-fill-button::before {\n transform: scaleY(0);\n transform-origin: center;\n}\n\n.vertical-fill-button:hover::before {\n transform: scaleY(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"4akdoqcag\",\"name\":\"code\",\"code\":\".vertical-fill-button::before {\\n transform: scaleY(0);\\n transform-origin: center;\\n}\\n\\n.vertical-fill-button:hover::before {\\n transform: scaleY(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"339b2824-340b-4a5b-be50-fc55d3736dfc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Main Fix\n\n","styles":{"bold":true}},{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"scaleY()","styles":{"code":true}},{"type":"text","text":" instead of ","styles":{}},{"type":"text","text":"scaleX()","styles":{"code":true}},{"type":"text","text":" for vertical animation. The button stays rounded, but the orange fill is not rounded.","styles":{}}],"children":[]},{"id":"fddc1c38-2894-405a-bede-242fbc7e015e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]