Split Fill Pill Button

[{"id":"fc69e194-1db1-4e95-873f-4bec34a5bb65","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9b56be1e-2388-45fe-aaa4-4d2f70de6212","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:\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n Arial,\\n sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.btn-12,\\n.btn-12 *,\\n.btn-12::after,\\n.btn-12::before {\\n box-sizing: border-box;\\n}\\n\\n.btn-12 {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n\\n padding: 0.8rem 3rem;\\n border: 2px solid #000;\\n border-radius: 99rem;\\n\\n background: #000;\\n color: #fff;\\n\\n cursor: pointer;\\n\\n font: inherit;\\n font-size: 15px;\\n font-weight: 900;\\n line-height: 1.5;\\n text-transform: uppercase;\\n\\n -webkit-tap-highlight-color: transparent;\\n -webkit-appearance: button;\\n}\\n\\n.btn-12 span {\\n position: relative;\\n z-index: 2;\\n color: #fff;\\n mix-blend-mode: difference;\\n}\\n\\n.btn-12::before,\\n.btn-12::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n z-index: 1;\\n\\n transform: translateY(var(--progress, 102%));\\n transition: transform 0.2s ease;\\n}\\n\\n.btn-12::before {\\n background: linear-gradient(\\n 90deg,\\n #fff 0 25%,\\n transparent 25% 50%,\\n #fff 50% 75%,\\n transparent 75% 100%\\n );\\n}\\n\\n.btn-12::after {\\n --progress: -102%;\\n\\n background: linear-gradient(\\n 90deg,\\n transparent 0 25%,\\n #fff 25% 50%,\\n transparent 50% 75%,\\n #fff 75% 100%\\n );\\n}\\n\\n.btn-12:hover::before,\\n.btn-12:hover::after {\\n --progress: 0;\\n}\\n\\n.btn-12:active {\\n transform: scale(0.97);\\n}\\n\\n.btn-12: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 .btn-12,\\n .btn-12::before,\\n .btn-12::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Split Fill Pill 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\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"09da0a6e-4a2d-4a3c-a876-6589a14c9602","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"355a2302-3d12-4806-8128-0d5adeaa38fd","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"942061e8-3420-4307-93d9-ef4f27e5bf3d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"75288544-3b84-473a-b821-f52430917c2d","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:\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n Arial,\\n sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.btn-12,\\n.btn-12 *,\\n.btn-12::after,\\n.btn-12::before {\\n box-sizing: border-box;\\n}\\n\\n.btn-12 {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n\\n padding: 0.8rem 3rem;\\n border: 2px solid #000;\\n border-radius: 99rem;\\n\\n background: #000;\\n color: #fff;\\n\\n cursor: pointer;\\n\\n font: inherit;\\n font-size: 15px;\\n font-weight: 900;\\n line-height: 1.5;\\n text-transform: uppercase;\\n\\n -webkit-tap-highlight-color: transparent;\\n -webkit-appearance: button;\\n}\\n\\n.btn-12 span {\\n position: relative;\\n z-index: 2;\\n color: #fff;\\n mix-blend-mode: difference;\\n}\\n\\n.btn-12::before,\\n.btn-12::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n z-index: 1;\\n\\n transform: translateY(var(--progress, 102%));\\n transition: transform 0.2s ease;\\n}\\n\\n.btn-12::before {\\n background: linear-gradient(\\n 90deg,\\n #fff 0 25%,\\n transparent 25% 50%,\\n #fff 50% 75%,\\n transparent 75% 100%\\n );\\n}\\n\\n.btn-12::after {\\n --progress: -102%;\\n\\n background: linear-gradient(\\n 90deg,\\n transparent 0 25%,\\n #fff 25% 50%,\\n transparent 50% 75%,\\n #fff 75% 100%\\n );\\n}\\n\\n.btn-12:hover::before,\\n.btn-12:hover::after {\\n --progress: 0;\\n}\\n\\n.btn-12:active {\\n transform: scale(0.97);\\n}\\n\\n.btn-12: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 .btn-12,\\n .btn-12::before,\\n .btn-12::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b826f2b9-872a-4af1-9230-de39460189a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"63aee45b-c20a-423a-990c-7b1f74b395ab","type":"divider","props":{},"children":[]},{"id":"8d0bc2f3-dbd6-435f-9045-c16edf1027b9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"a751fc75-98f5-4bb5-a7f2-44a632a49184","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\nThis component creates a black pill button with a split white fill animation. On hover, white blocks slide in from the top and bottom, creating an alternating split-fill effect.","styles":{}}],"children":[]},{"id":"50875c46-b6d3-4e76-9ddf-ebb9fb5f68c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"c226b1b1-2198-4f3c-ab9c-bd26acb2d008","type":"procode","props":{"code":"Page\n└── button.btn-12\n ├── ::before fill layer\n ├── ::after fill layer\n └── span text","language":"javascript","filename":"","files":"[{\"id\":\"2pvf88lug\",\"name\":\"code\",\"code\":\"Page\\n└── button.btn-12\\n ├── ::before fill layer\\n ├── ::after fill layer\\n └── span text\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a5ed84f6-b302-4ca3-ad8c-c9d2e40421a4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"34a74e87-d01a-4465-8db3-f5ae66abbe8b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"96r4sru5h\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f25ec0b4-c418-4f09-87d4-c8513da5957f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button text is wrapped inside ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" so it can stay above the animated fill layers.","styles":{}}],"children":[]},{"id":"7758d5bf-15fd-49b2-b8a7-31221baaea2e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout Flow","styles":{}}],"children":[]},{"id":"237b0997-cc88-405d-b6e4-d68fa0b236b4","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"k3ts3itf1\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d0832e28-70cb-441e-be19-e12e0b5a9918","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" class centers the button vertically and horizontally.","styles":{}}],"children":[]},{"id":"6fdd884b-3ea0-4e65-8137-11d6198e3256","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base Flow","styles":{}}],"children":[]},{"id":"7a91c8d7-1807-425f-a39a-66728ae8837e","type":"procode","props":{"code":".btn-12 {\n position: relative;\n isolation: isolate;\n overflow: hidden;\n border-radius: 99rem;\n background: #000;\n color: #fff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jcffr164y\",\"name\":\"code\",\"code\":\".btn-12 {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n border-radius: 99rem;\\n background: #000;\\n color: #fff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"03d53055-7842-47c5-ae79-34777556f8b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" so the pseudo-elements can be positioned inside it.","styles":{}}],"children":[]},{"id":"51362abf-8f33-4834-bbe6-70dd5af7f081","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the fill animation clipped inside the pill shape.","styles":{}}],"children":[]},{"id":"d81503b9-9c14-476b-b31f-0898b4ea3e48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" keeps the pseudo-element layers clean and prevents blend issues outside the button.","styles":{}}],"children":[]},{"id":"8ec8bf6a-bb15-4fe6-b1c5-c5eef5446f26","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer Flow","styles":{}}],"children":[]},{"id":"4a6f0069-27fc-45c1-acad-512daa4d834b","type":"procode","props":{"code":".btn-12 span {\n position: relative;\n z-index: 2;\n color: #fff;\n mix-blend-mode: difference;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mx8vaudnx\",\"name\":\"code\",\"code\":\".btn-12 span {\\n position: relative;\\n z-index: 2;\\n color: #fff;\\n mix-blend-mode: difference;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"39b11edf-3738-48dd-9849-758d6b10b91e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text is above the fill layers because it uses ","styles":{}},{"type":"text","text":"z-index: 2","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"0673fff9-f847-4f81-8a4a-a15c49a2d196","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"mix-blend-mode: difference","styles":{"code":true}},{"type":"text","text":" makes the text visually invert when the white fill passes behind it.","styles":{}}],"children":[]},{"id":"aea80880-f849-40da-acfd-e92813d5d0ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Layer Flow","styles":{}}],"children":[]},{"id":"4b72245b-04e9-4442-9072-a12587b52358","type":"procode","props":{"code":".btn-12::before,\n.btn-12::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: 1;\n transform: translateY(var(--progress, 102%));\n transition: transform 0.2s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6hoh6wle6\",\"name\":\"code\",\"code\":\".btn-12::before,\\n.btn-12::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n z-index: 1;\\n transform: translateY(var(--progress, 102%));\\n transition: transform 0.2s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e552e303-bc30-46b3-8fa9-9f92b37360de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Both pseudo-elements are full-size layers inside the button.","styles":{}}],"children":[]},{"id":"12d9f70e-5919-4a30-b16e-24176f5b8762","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The default ","styles":{}},{"type":"text","text":"--progress","styles":{"code":true}},{"type":"text","text":" value moves the layer outside the button:","styles":{}}],"children":[]},{"id":"f464be63-660f-4f43-98a6-d947905d19ab","type":"procode","props":{"code":"transform: translateY(102%);","language":"javascript","filename":"","files":"[{\"id\":\"bw9xd570w\",\"name\":\"code\",\"code\":\"transform: translateY(102%);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"42c29827-15a4-4a17-8eb4-0cb79b8558ac","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"So the first fill layer starts below the button.","styles":{}}],"children":[]},{"id":"6cf1f6e6-cf58-4f43-ae73-984fa305f485","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Split Pattern Flow","styles":{}}],"children":[]},{"id":"968a5255-2559-40b4-921e-e1f51dfc359b","type":"procode","props":{"code":".btn-12::before {\n background: linear-gradient(\n 90deg,\n #fff 0 25%,\n transparent 25% 50%,\n #fff 50% 75%,\n transparent 75% 100%\n );\n}","language":"javascript","filename":"","files":"[{\"id\":\"b34e1ybf2\",\"name\":\"code\",\"code\":\".btn-12::before {\\n background: linear-gradient(\\n 90deg,\\n #fff 0 25%,\\n transparent 25% 50%,\\n #fff 50% 75%,\\n transparent 75% 100%\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"60534912-5725-4c8b-9eb1-095d1b7ce43b","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":" layer fills the first and third columns.","styles":{}}],"children":[]},{"id":"a55ae601-8c63-4610-909a-a7ab15389ea8","type":"procode","props":{"code":".btn-12::after {\n --progress: -102%;\n\n background: linear-gradient(\n 90deg,\n transparent 0 25%,\n #fff 25% 50%,\n transparent 50% 75%,\n #fff 75% 100%\n );\n}","language":"javascript","filename":"","files":"[{\"id\":\"6f05ogybz\",\"name\":\"code\",\"code\":\".btn-12::after {\\n --progress: -102%;\\n\\n background: linear-gradient(\\n 90deg,\\n transparent 0 25%,\\n #fff 25% 50%,\\n transparent 50% 75%,\\n #fff 75% 100%\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"372c5697-ee68-49aa-bef4-fcc6fa536194","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" layer fills the second and fourth columns.","styles":{}}],"children":[]},{"id":"b0e32627-77b2-4575-a439-3ab588cbf437","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Because ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" starts at ","styles":{}},{"type":"text","text":"-102%","styles":{"code":true}},{"type":"text","text":", it comes from the top.","styles":{}}],"children":[]},{"id":"d435f1ee-eb0c-49ab-85c9-1fa1a003152a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow","styles":{}}],"children":[]},{"id":"3988420b-af4c-40a7-bbf8-979b85a73658","type":"procode","props":{"code":".btn-12:hover::before,\n.btn-12:hover::after {\n --progress: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"n6vh8b54q\",\"name\":\"code\",\"code\":\".btn-12:hover::before,\\n.btn-12:hover::after {\\n --progress: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae37191c-6e87-4613-9e61-7d363dc889b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, both layers move to ","styles":{}},{"type":"text","text":"translateY(0)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"02197cbb-c762-48d7-9e9e-335e661a84d5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation direction:","styles":{}}],"children":[]},{"id":"2d186b01-408f-4b4c-99e7-66867fa4cf72","type":"procode","props":{"code":"::before → slides up from bottom\n::after → slides down from top","language":"javascript","filename":"","files":"[{\"id\":\"5hd1oxfly\",\"name\":\"code\",\"code\":\"::before → slides up from bottom\\n::after → slides down from top\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8854a926-2181-4b87-bb19-0eb67534f31b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the split-fill motion.","styles":{}}],"children":[]},{"id":"286e20c6-dc74-424f-93c9-a8c2a77d7e17","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"847319a2-ecdd-4351-abac-f31945c95c8a","type":"procode","props":{"code":".btn-12:active {\n transform: scale(0.97);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rr717gce1\",\"name\":\"code\",\"code\":\".btn-12:active {\\n transform: scale(0.97);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f808674-3f9c-4493-ae46-87e0468ccaaa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"fe5c2b39-59ad-4548-ba27-a01b4098c9cc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow","styles":{}}],"children":[]},{"id":"fb0b576b-9295-4fd8-8c1a-c7a65cc23f3b","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .btn-12,\n .btn-12::before,\n .btn-12::after {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"dgxdtdq1n\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .btn-12,\\n .btn-12::before,\\n .btn-12::after {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a8ddcc43-c9a3-4188-b57e-c777b01ed2e6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For users who prefer reduced motion, the animation transition is removed.","styles":{}}],"children":[]},{"id":"c91cd84e-87fd-4242-8f5a-6a301ebafa92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]