layer Fill Button

[{"id":"e556ccbb-db2d-4ba2-9d42-65cbf2b811ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5fadc59e-f8b5-4707-9bf7-f6a0a7fbeedf","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: grid;\\n place-items: center;\\n}\\n\\n.fill-button {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n padding: 15px 36px;\\n\\n border: none;\\n border-radius: 999px;\\n\\n background: transparent;\\n color: #000000;\\n\\n box-shadow: inset 0 0 0 2px #000000;\\n\\n overflow: hidden;\\n cursor: pointer;\\n\\n font-size: 18px;\\n font-weight: 700;\\n letter-spacing: 0.3px;\\n\\n transition:\\n color 0.45s ease,\\n transform 0.15s ease;\\n}\\n\\n.fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n\\n inset: -4px;\\n\\n background: #000000;\\n border-radius: 999px;\\n\\n transform: translate3d(0, 110%, 0);\\n transition: transform 0.45s ease;\\n\\n z-index: 0;\\n backface-visibility: hidden;\\n will-change: transform;\\n}\\n\\n.fill-button span {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.fill-button:hover {\\n color: #ffffff;\\n}\\n\\n.fill-button:hover::before {\\n transform: translate3d(0, 0, 0);\\n}\\n\\n.fill-button:active {\\n transform: scale(0.96);\\n}\\n\\n.fill-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 5px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .fill-button,\\n .fill-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n layer Fill Button\\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":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"296a3dc9-78ca-4b9e-98a5-0747d58bc851","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a68d9812-741a-4af0-b794-c059d5b43c81","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"0cccc330-c845-46b5-96bc-f4253bb9fed6","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66d4ea6f-473b-499a-84d0-c3cacf8908a8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"f9f4c1ed-f367-48cc-af4e-ff48d1c84a72","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: grid;\\n place-items: center;\\n}\\n\\n.fill-button {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n padding: 15px 36px;\\n\\n border: none;\\n border-radius: 999px;\\n\\n background: transparent;\\n color: #000000;\\n\\n box-shadow: inset 0 0 0 2px #000000;\\n\\n overflow: hidden;\\n cursor: pointer;\\n\\n font-size: 18px;\\n font-weight: 700;\\n letter-spacing: 0.3px;\\n\\n transition:\\n color 0.45s ease,\\n transform 0.15s ease;\\n}\\n\\n.fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n\\n inset: -4px;\\n\\n background: #000000;\\n border-radius: 999px;\\n\\n transform: translate3d(0, 110%, 0);\\n transition: transform 0.45s ease;\\n\\n z-index: 0;\\n backface-visibility: hidden;\\n will-change: transform;\\n}\\n\\n.fill-button span {\\n position: relative;\\n z-index: 1;\\n}\\n\\n.fill-button:hover {\\n color: #ffffff;\\n}\\n\\n.fill-button:hover::before {\\n transform: translate3d(0, 0, 0);\\n}\\n\\n.fill-button:active {\\n transform: scale(0.96);\\n}\\n\\n.fill-button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 5px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .fill-button,\\n .fill-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ca775d0-a877-4a3b-98ba-e8fd1a340341","type":"divider","props":{},"children":[]},{"id":"a3f0daaf-fd15-407f-8572-4c8c73cbdabc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"c2fc3059-d0d7-4574-b3df-324f4a9f3aa5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Structure","styles":{}}],"children":[]},{"id":"237ed181-126a-45cf-9a34-25d870332e4c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"h4zxt4vka\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"80576e70-4fc8-4cb3-a1de-f1af7a92583c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses one ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" for the text. The ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" is needed because the animated fill layer sits behind it.","styles":{}}],"children":[]},{"id":"cfe20b45-e145-49ee-a0b7-fa6f945d5f68","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base","styles":{}}],"children":[]},{"id":"3b1f9281-0f2e-4bfb-b77a-eb466019e575","type":"procode","props":{"code":".fill-button {\n position: relative;\n overflow: hidden;\n border-radius: 999px;\n background: transparent;\n color: #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9t8g8l0mz\",\"name\":\"code\",\"code\":\".fill-button {\\n position: relative;\\n overflow: hidden;\\n border-radius: 999px;\\n background: transparent;\\n color: #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"640a294e-8a24-42c0-9172-8f3022e621b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button starts as a transparent pill with black text.","styles":{}}],"children":[]},{"id":"d1442959-165b-47f1-8984-573a377fc3e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The pill shape is created with:","styles":{}}],"children":[]},{"id":"9724050e-e64f-416c-9e41-46107ce067af","type":"procode","props":{"code":"border-radius: 999px;","language":"javascript","filename":"","files":"[{\"id\":\"w0k174do4\",\"name\":\"code\",\"code\":\"border-radius: 999px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"90caa4b0-8c77-494a-a4ab-fea228748293","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"White Edge Bug Fix","styles":{}}],"children":[]},{"id":"513f359c-d971-4dda-9603-26d17ebfa241","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Instead of using a real border, this version uses an inset shadow:","styles":{}}],"children":[]},{"id":"eb4d5b11-8944-4dae-a554-8c2209b52d6c","type":"procode","props":{"code":"box-shadow: inset 0 0 0 2px #000000;","language":"javascript","filename":"","files":"[{\"id\":\"b90dkm8w1\",\"name\":\"code\",\"code\":\"box-shadow: inset 0 0 0 2px #000000;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74169831-9be8-4b2a-99c8-27da7e3cea77","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This avoids the white edge bug that can appear on rounded sides when a real border and moving fill layer overlap.","styles":{}}],"children":[]},{"id":"c76bdbdd-b6ff-430c-bc52-417c4325d58a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Layer","styles":{}}],"children":[]},{"id":"ae7ea099-b400-4960-8c8c-8e0612bf697b","type":"procode","props":{"code":".fill-button::before {\n content: \"\";\n position: absolute;\n inset: -4px;\n background: #000000;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hf4ql6lcl\",\"name\":\"code\",\"code\":\".fill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: -4px;\\n background: #000000;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8077a043-15cf-4d44-a49f-a3fd99d26b27","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the black fill layer.","styles":{}}],"children":[]},{"id":"b6237cbb-f5c9-4dd0-879b-2a2817704153","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The important fix is:","styles":{}}],"children":[]},{"id":"6f2cf530-77b5-40a2-b42e-73616091037e","type":"procode","props":{"code":"inset: -4px;","language":"javascript","filename":"","files":"[{\"id\":\"gi4j8tbvb\",\"name\":\"code\",\"code\":\"inset: -4px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"05f50a72-0580-4307-885c-b78d1901e681","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the fill layer slightly bigger than the button, so it fully covers the rounded edges during animation.","styles":{}}],"children":[]},{"id":"7c2ee9ba-dbf5-488e-8013-ed9b1aeaa0db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Animation State","styles":{}}],"children":[]},{"id":"71831702-36d8-4888-867d-81fcfec4ad12","type":"procode","props":{"code":"transform: translate3d(0, 110%, 0);","language":"javascript","filename":"","files":"[{\"id\":\"aabcdbmj9\",\"name\":\"code\",\"code\":\"transform: translate3d(0, 110%, 0);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0edd5e0b-7cba-46c3-911d-4667255485ac","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The black fill starts below the button.","styles":{}}],"children":[]},{"id":"f47f37d8-6827-453d-957f-5faa70d3e047","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation","styles":{}}],"children":[]},{"id":"cddc6c35-46a3-41ce-bbec-087013667a7b","type":"procode","props":{"code":".fill-button:hover::before {\n transform: translate3d(0, 0, 0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"hjve0vsia\",\"name\":\"code\",\"code\":\".fill-button:hover::before {\\n transform: translate3d(0, 0, 0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50ae7871-937b-473f-ac55-200be0757647","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the black fill moves upward into the button.","styles":{}}],"children":[]},{"id":"8357ac75-76ed-4843-86a5-2b22ef0a7f1f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer","styles":{}}],"children":[]},{"id":"73899a54-fa11-42f7-9f21-4f0159d327b9","type":"procode","props":{"code":".fill-button span {\n position: relative;\n z-index: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yn4sr0jj5\",\"name\":\"code\",\"code\":\".fill-button span {\\n position: relative;\\n z-index: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d969d378-837e-4c8c-bb9f-a918d66a9a81","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text is placed above the fill layer so it stays visible.","styles":{}}],"children":[]},{"id":"ca4abd83-40e1-43fa-9f63-8a1f4a840126","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Color Flow","styles":{}}],"children":[]},{"id":"61eff1ae-dc2b-47be-8146-b279d8e5e719","type":"procode","props":{"code":".fill-button {\n color: #000000;\n}\n\n.fill-button:hover {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"877ljnyf8\",\"name\":\"code\",\"code\":\".fill-button {\\n color: #000000;\\n}\\n\\n.fill-button:hover {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"90dc7ccd-4e0d-473c-a2d8-01e44b35ae77","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default state: black text.\nHover state: white text.","styles":{}}],"children":[]},{"id":"0fba33e1-4d3f-49fa-a6e4-9d8d15f41fe8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]