Split dot fill Button

[{"id":"f0a24019-bafd-4943-98eb-5cb30853b1ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"43656d9a-12a0-4593-a31e-dee95f162161","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: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.bubble-fill-button {\\n --button-bg: #ffffff;\\n --button-color: #5d3fd3;\\n --size-letter: 32px;\\n\\n padding: 0.5em 1em;\\n font-size: var(--size-letter);\\n background-color: transparent;\\n border: calc(var(--size-letter) / 6) solid var(--button-color);\\n border-radius: 0.2em;\\n cursor: pointer;\\n overflow: hidden;\\n position: relative;\\n transition: 300ms cubic-bezier(0.83, 0, 0.17, 1);\\n}\\n\\n.bubble-fill-text {\\n font-weight: 700;\\n color: var(--button-color);\\n position: relative;\\n z-index: 1;\\n transition: color 700ms cubic-bezier(0.83, 0, 0.17, 1);\\n}\\n\\n.bubble-fill-button::before {\\n top: 0;\\n left: 0;\\n}\\n\\n.bubble-fill-button::after {\\n top: 100%;\\n left: 100%;\\n}\\n\\n.bubble-fill-button::before,\\n.bubble-fill-button::after {\\n content: \\\"\\\";\\n width: 150%;\\n aspect-ratio: 1 / 1;\\n scale: 0;\\n background-color: var(--button-color);\\n border-radius: 50%;\\n position: absolute;\\n translate: -50% -50%;\\n transition: 1000ms cubic-bezier(0.76, 0, 0.24, 1);\\n}\\n\\n.bubble-fill-button:hover .bubble-fill-text {\\n color: var(--button-bg);\\n}\\n\\n.bubble-fill-button:hover::before,\\n.bubble-fill-button:hover::after {\\n scale: 1;\\n}\\n\\n.bubble-fill-button:active {\\n scale: 0.98;\\n filter: brightness(0.9);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .bubble-fill-button,\\n .bubble-fill-text,\\n .bubble-fill-button::before,\\n .bubble-fill-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Split dot 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":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"fcdac23e-a41e-4dd3-9227-9129d5682d00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f4898121-20bc-41aa-92b5-49e401799cc1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c83458e0-097b-43a0-b88a-ac7b8b99d35f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"a26e2c28-4209-4d25-9ac3-01dd673c2144","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b598a1a4-7293-4316-984e-3a123562527a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"579f8526-3659-4850-a79c-60c2527292de","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: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.bubble-fill-button {\\n --button-bg: #ffffff;\\n --button-color: #5d3fd3;\\n --size-letter: 32px;\\n\\n padding: 0.5em 1em;\\n font-size: var(--size-letter);\\n background-color: transparent;\\n border: calc(var(--size-letter) / 6) solid var(--button-color);\\n border-radius: 0.2em;\\n cursor: pointer;\\n overflow: hidden;\\n position: relative;\\n transition: 300ms cubic-bezier(0.83, 0, 0.17, 1);\\n}\\n\\n.bubble-fill-text {\\n font-weight: 700;\\n color: var(--button-color);\\n position: relative;\\n z-index: 1;\\n transition: color 700ms cubic-bezier(0.83, 0, 0.17, 1);\\n}\\n\\n.bubble-fill-button::before {\\n top: 0;\\n left: 0;\\n}\\n\\n.bubble-fill-button::after {\\n top: 100%;\\n left: 100%;\\n}\\n\\n.bubble-fill-button::before,\\n.bubble-fill-button::after {\\n content: \\\"\\\";\\n width: 150%;\\n aspect-ratio: 1 / 1;\\n scale: 0;\\n background-color: var(--button-color);\\n border-radius: 50%;\\n position: absolute;\\n translate: -50% -50%;\\n transition: 1000ms cubic-bezier(0.76, 0, 0.24, 1);\\n}\\n\\n.bubble-fill-button:hover .bubble-fill-text {\\n color: var(--button-bg);\\n}\\n\\n.bubble-fill-button:hover::before,\\n.bubble-fill-button:hover::after {\\n scale: 1;\\n}\\n\\n.bubble-fill-button:active {\\n scale: 0.98;\\n filter: brightness(0.9);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .bubble-fill-button,\\n .bubble-fill-text,\\n .bubble-fill-button::before,\\n .bubble-fill-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7ee110a-b620-4225-bc48-4d223b75c989","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"27bb1fd6-b0eb-46c7-9b30-a09dc0c5d97d","type":"divider","props":{},"children":[]},{"id":"358ccd6b-7459-4e50-9f1f-3b8f6a63b25b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"3e070a4c-c56f-44d2-84c0-4ea5ff000945","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The HTML uses one button and one span inside it.","styles":{}}],"children":[]},{"id":"f81e08da-e015-46d7-8cd8-14d013618da6","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"plfiv4448\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2634c12f-79e6-4f2a-ad2f-fd728ceb4188","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is the animation container.\n\nThe span keeps the text above the fill animation.","styles":{}}],"children":[]},{"id":"8fb6032a-48aa-4388-9b80-b72d0b697e21","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"cd160a2c-adb0-4f4e-9366-5514aca7db4e","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 in the screen.","styles":{}}],"children":[]},{"id":"f46bdc34-768c-4c44-8df3-401c48792fc8","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\":\"0zu4cdv4m\",\"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":"56b97b43-b66f-4cc5-ab76-21ce816a66e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color Setup","styles":{}}],"children":[]},{"id":"001eb7a0-a484-42a8-aa7e-f6e332b3865b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses two CSS variables.","styles":{}}],"children":[]},{"id":"85dbe2eb-9f07-462d-b581-f2a2499f26bd","type":"procode","props":{"code":"--button-bg: #ffffff;\n--button-color: #5d3fd3;","language":"javascript","filename":"","files":"[{\"id\":\"n7mxq3z6a\",\"name\":\"code\",\"code\":\"--button-bg: #ffffff;\\n--button-color: #5d3fd3;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59eedd46-a7e3-40b4-83b9-2079fbe87de5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"--button-color","styles":{"code":true}},{"type":"text","text":" controls the iris border, text, and bubble fill color.\n\n","styles":{}},{"type":"text","text":"--button-bg","styles":{"code":true}},{"type":"text","text":" controls the text color after hover.","styles":{}}],"children":[]},{"id":"272e3258-244e-4282-aee4-75a7ba8f61bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Base Button","styles":{}}],"children":[]},{"id":"80d1a4b1-5b46-4431-96f6-693b71fd59be","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button starts transparent with an iris border.","styles":{}}],"children":[]},{"id":"a0a325ce-a3e3-4d38-93ad-92f4ae06458b","type":"procode","props":{"code":".bubble-fill-button {\n background-color: transparent;\n border: calc(var(--size-letter) / 6) solid var(--button-color);\n color: var(--button-color);\n overflow: hidden;\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"81wqe9y26\",\"name\":\"code\",\"code\":\".bubble-fill-button {\\n background-color: transparent;\\n border: calc(var(--size-letter) / 6) solid var(--button-color);\\n color: var(--button-color);\\n overflow: hidden;\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0d092ce-7489-4374-ba9f-c3eb38dfbcaa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" is important because the circles are larger than the button, but only the inside part should be visible.","styles":{}}],"children":[]},{"id":"03d3987d-95b8-422c-84d6-5a437c40f7a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer","styles":{}}],"children":[]},{"id":"bda908ee-d7fc-4b56-8a6a-6254c88e52db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text is placed above the bubble animation using ","styles":{}},{"type":"text","text":"z-index","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8bb3287d-6d87-4d3b-a32c-b6b41f98c5f1","type":"procode","props":{"code":".bubble-fill-text {\n position: relative;\n z-index: 1;\n color: var(--button-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"00zgchtxe\",\"name\":\"code\",\"code\":\".bubble-fill-text {\\n position: relative;\\n z-index: 1;\\n color: var(--button-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"120e4de2-e168-4781-bf0d-c140af769f9f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Without ","styles":{}},{"type":"text","text":"z-index: 1","styles":{"code":true}},{"type":"text","text":", the bubble fill can cover the text.","styles":{}}],"children":[]},{"id":"e5fa0a37-bffd-4667-b079-373b75384010","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bubble Layers","styles":{}}],"children":[]},{"id":"730f2eff-aa02-479f-ba0d-f0c663c713b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The fill effect uses two pseudo-elements.","styles":{}}],"children":[]},{"id":"0a85f4fa-4cff-4ee0-b5b9-48bb1d891074","type":"procode","props":{"code":".bubble-fill-button::before,\n.bubble-fill-button::after {\n content: \"\";\n width: 150%;\n aspect-ratio: 1 / 1;\n scale: 0;\n background-color: var(--button-color);\n border-radius: 50%;\n position: absolute;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2v7e3ksan\",\"name\":\"code\",\"code\":\".bubble-fill-button::before,\\n.bubble-fill-button::after {\\n content: \\\"\\\";\\n width: 150%;\\n aspect-ratio: 1 / 1;\\n scale: 0;\\n background-color: var(--button-color);\\n border-radius: 50%;\\n position: absolute;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de4bcce7-b6e1-4f55-96fc-3ccde06616bb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Both bubbles start hidden because their scale is ","styles":{}},{"type":"text","text":"0","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"624042da-c3a7-4ff1-9c8e-4bae7c3b1aab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bubble Position","styles":{}}],"children":[]},{"id":"e9e12b95-f2cd-48a2-9297-8838222c8fd8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The first bubble starts from the top-left corner.","styles":{}}],"children":[]},{"id":"cffec5fd-78f4-447b-9f1e-cce412746d05","type":"procode","props":{"code":".bubble-fill-button::before {\n top: 0;\n left: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ppwnbbz7y\",\"name\":\"code\",\"code\":\".bubble-fill-button::before {\\n top: 0;\\n left: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf21560f-8f5d-48d4-9d33-97def4560250","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The second bubble starts from the bottom-right corner.","styles":{}}],"children":[]},{"id":"6a0b817f-43c4-4e27-bea1-73dd8402fd6d","type":"procode","props":{"code":".bubble-fill-button::after {\n top: 100%;\n left: 100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"16x452v1g\",\"name\":\"code\",\"code\":\".bubble-fill-button::after {\\n top: 100%;\\n left: 100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a16e8e15-b259-4ad5-8c30-6b9a9161e8fa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Flow","styles":{}}],"children":[]},{"id":"10d461ad-13d7-43bc-b2d6-d5467e140895","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, both circles scale up.","styles":{}}],"children":[]},{"id":"5c8dde53-a3e8-4458-8743-1cf196df2ade","type":"procode","props":{"code":".bubble-fill-button:hover::before,\n.bubble-fill-button:hover::after {\n scale: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0f36i4fmh\",\"name\":\"code\",\"code\":\".bubble-fill-button:hover::before,\\n.bubble-fill-button:hover::after {\\n scale: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4d56c89-0aa6-4abd-8b89-2ca43de99c70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the bubble fill animation from two opposite corners.","styles":{}}],"children":[]},{"id":"32e00882-e3bd-41e4-b837-84234eb231aa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Text Flow","styles":{}}],"children":[]},{"id":"e59193c6-2f37-418e-a571-e0980121d60b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the iris fill appears, the text changes to white.","styles":{}}],"children":[]},{"id":"e3a20edd-424e-42c2-bde2-39a68f5368b3","type":"procode","props":{"code":".bubble-fill-button:hover .bubble-fill-text {\n color: var(--button-bg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zno9vvuez\",\"name\":\"code\",\"code\":\".bubble-fill-button:hover .bubble-fill-text {\\n color: var(--button-bg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4e8eb732-0010-47be-9f82-e228f68ca6df","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"defa2c9f-7dc5-4104-8639-4a5758294872","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button becomes slightly smaller and darker.","styles":{}}],"children":[]},{"id":"84aa92d4-cf93-4ff5-8c24-ed136485c724","type":"procode","props":{"code":".bubble-fill-button:active {\n scale: 0.98;\n filter: brightness(0.9);\n}","language":"javascript","filename":"","files":"[{\"id\":\"bscvmzy22\",\"name\":\"code\",\"code\":\".bubble-fill-button:active {\\n scale: 0.98;\\n filter: brightness(0.9);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"53741305-cd3a-4660-bad8-fb23b12ed38c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"9e2eefa3-6754-43b9-9bef-dbbfc63cd00c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The media query removes transitions for users who prefer less animation.","styles":{}}],"children":[]},{"id":"d5128640-1384-4cdb-86ca-eb6bef4ffcc7","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .bubble-fill-button,\n .bubble-fill-text,\n .bubble-fill-button::before,\n .bubble-fill-button::after {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"gxvjg695b\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .bubble-fill-button,\\n .bubble-fill-text,\\n .bubble-fill-button::before,\\n .bubble-fill-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"687430d5-b1fa-43b9-9227-cb91c6c5fe94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]