Purple Running Line Button

[{"id":"34c0d43d-6941-462a-b8d7-ebb1f262a4f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"36509792-713e-4885-91db-1b663042c9d3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #000000;\\n\\n --button-width: 160px;\\n --button-height: 56px;\\n\\n --button-bg: #050505;\\n --button-bg-hover: #080808;\\n --button-text: #ffffff;\\n\\n --line-size: 2px;\\n --line-gap: 5px;\\n\\n --purple-1: #6d28d9;\\n --purple-2: #a855f7;\\n --purple-3: #d946ef;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: var(--page-bg);\\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 overflow: hidden;\\n}\\n\\n.running-button {\\n position: relative;\\n\\n width: var(--button-width);\\n height: var(--button-height);\\n\\n padding: 0;\\n border: none;\\n border-radius: 999px;\\n\\n color: var(--button-text);\\n background: transparent;\\n\\n cursor: pointer;\\n overflow: hidden;\\n}\\n\\n.button-line {\\n position: absolute;\\n border-radius: 999px;\\n pointer-events: none;\\n}\\n\\n.button-line::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: -160%;\\n\\n background: conic-gradient(\\n from 0deg,\\n transparent 0deg,\\n transparent 85deg,\\n var(--purple-1) 130deg,\\n var(--purple-2) 180deg,\\n var(--purple-3) 230deg,\\n transparent 280deg,\\n transparent 360deg\\n );\\n\\n animation: line-spin 2.8s linear infinite;\\n}\\n\\n.button-line-outer {\\n inset: 0;\\n}\\n\\n.button-line-inner {\\n inset: calc(var(--line-size) + var(--line-gap));\\n}\\n\\n.button-line-inner::before {\\n animation-duration: 3.4s;\\n animation-direction: reverse;\\n}\\n\\n.button-line-outer,\\n.button-line-inner {\\n padding: var(--line-size);\\n\\n -webkit-mask:\\n linear-gradient(#000 0 0) content-box,\\n linear-gradient(#000 0 0);\\n -webkit-mask-composite: xor;\\n\\n mask:\\n linear-gradient(#000 0 0) content-box,\\n linear-gradient(#000 0 0);\\n mask-composite: exclude;\\n}\\n\\n.button-content {\\n position: absolute;\\n inset: calc((var(--line-size) + var(--line-gap)) * 2);\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n color: var(--button-text);\\n background: var(--button-bg);\\n\\n border-radius: 999px;\\n\\n font-size: 15px;\\n font-weight: 700;\\n}\\n\\n.running-button:hover .button-content {\\n background: var(--button-bg-hover);\\n}\\n\\n.running-button:active .button-content {\\n transform: scale(0.98);\\n}\\n\\n@keyframes line-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button-line::before {\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Purple Running Line 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":"b2f54839-d9cf-4ae8-b302-da58ec497820","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"2a4ce13d-5155-412c-968b-6e779a4c44f0","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd87f827-143c-4de8-b13d-f7844d6ceb5c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"d6f9e394-60f5-4ba8-93c1-31cacc71be00","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #000000;\\n\\n --button-width: 160px;\\n --button-height: 56px;\\n\\n --button-bg: #050505;\\n --button-bg-hover: #080808;\\n --button-text: #ffffff;\\n\\n --line-size: 2px;\\n --line-gap: 5px;\\n\\n --purple-1: #6d28d9;\\n --purple-2: #a855f7;\\n --purple-3: #d946ef;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: var(--page-bg);\\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 overflow: hidden;\\n}\\n\\n.running-button {\\n position: relative;\\n\\n width: var(--button-width);\\n height: var(--button-height);\\n\\n padding: 0;\\n border: none;\\n border-radius: 999px;\\n\\n color: var(--button-text);\\n background: transparent;\\n\\n cursor: pointer;\\n overflow: hidden;\\n}\\n\\n.button-line {\\n position: absolute;\\n border-radius: 999px;\\n pointer-events: none;\\n}\\n\\n.button-line::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: -160%;\\n\\n background: conic-gradient(\\n from 0deg,\\n transparent 0deg,\\n transparent 85deg,\\n var(--purple-1) 130deg,\\n var(--purple-2) 180deg,\\n var(--purple-3) 230deg,\\n transparent 280deg,\\n transparent 360deg\\n );\\n\\n animation: line-spin 2.8s linear infinite;\\n}\\n\\n.button-line-outer {\\n inset: 0;\\n}\\n\\n.button-line-inner {\\n inset: calc(var(--line-size) + var(--line-gap));\\n}\\n\\n.button-line-inner::before {\\n animation-duration: 3.4s;\\n animation-direction: reverse;\\n}\\n\\n.button-line-outer,\\n.button-line-inner {\\n padding: var(--line-size);\\n\\n -webkit-mask:\\n linear-gradient(#000 0 0) content-box,\\n linear-gradient(#000 0 0);\\n -webkit-mask-composite: xor;\\n\\n mask:\\n linear-gradient(#000 0 0) content-box,\\n linear-gradient(#000 0 0);\\n mask-composite: exclude;\\n}\\n\\n.button-content {\\n position: absolute;\\n inset: calc((var(--line-size) + var(--line-gap)) * 2);\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n color: var(--button-text);\\n background: var(--button-bg);\\n\\n border-radius: 999px;\\n\\n font-size: 15px;\\n font-weight: 700;\\n}\\n\\n.running-button:hover .button-content {\\n background: var(--button-bg-hover);\\n}\\n\\n.running-button:active .button-content {\\n transform: scale(0.98);\\n}\\n\\n@keyframes line-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button-line::before {\\n animation: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4cdcf9b9-fa51-4446-a6f2-3b3e81ff15e1","type":"divider","props":{},"children":[]},{"id":"a7b89570-1734-49fb-ac7f-2391c2dbe4c2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"0ba006e3-e864-4159-909f-b00873dd5cdc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"403fcf72-2728-4920-92d9-5c774782117c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"pjpxcecs0\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87bdc029-338c-48dd-9e2f-7e269f377f51","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button has three internal layers.","styles":{}}],"children":[]},{"id":"767775c0-ae4e-49cc-8a2c-60336d44bed9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"button-line-outer","styles":{"code":true}},{"type":"text","text":" creates the outside animated purple line.\n\n","styles":{}},{"type":"text","text":"button-line-inner","styles":{"code":true}},{"type":"text","text":" creates the inside animated purple line.\n\n","styles":{}},{"type":"text","text":"button-content","styles":{"code":true}},{"type":"text","text":" creates the black center area with the text ","styles":{}},{"type":"text","text":"Button","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"dc2ec1af-f92e-4762-b7d7-843222f02bb0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button itself is only the wrapper. The actual visual design comes from the three ","styles":{}},{"type":"text","text":"span","styles":{"code":true}},{"type":"text","text":" layers inside it.","styles":{}}],"children":[]},{"id":"0a6b74c5-8ca4-4e31-a698-c37b1589bb1f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color System","styles":{}}],"children":[]},{"id":"a18316c2-02ba-4511-9161-f2b43eb1cb61","type":"procode","props":{"code":":root {\n --page-bg: #000000;\n --button-bg: #050505;\n --button-bg-hover: #080808;\n --button-text: #ffffff;\n\n --purple-1: #6d28d9;\n --purple-2: #a855f7;\n --purple-3: #d946ef;\n}","language":"javascript","filename":"","files":"[{\"id\":\"t4juzjv5y\",\"name\":\"code\",\"code\":\":root {\\n --page-bg: #000000;\\n --button-bg: #050505;\\n --button-bg-hover: #080808;\\n --button-text: #ffffff;\\n\\n --purple-1: #6d28d9;\\n --purple-2: #a855f7;\\n --purple-3: #d946ef;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9468e3ee-5d3f-4584-adb9-e082a45730ee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The component uses a black page background, a near-black button surface, white text, and three purple tones for the running line animation.","styles":{}}],"children":[]},{"id":"d6047e2f-b111-4f83-aa49-3ce2d5bc3bcc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The purple line is not a normal border. It is created with a rotating ","styles":{}},{"type":"text","text":"conic-gradient","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"378c0a6c-d3b8-47e9-a4d9-a49dff5a97cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Page Layout","styles":{}}],"children":[]},{"id":"5c659e35-eea0-4725-af4a-692c185db4d5","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1r0bkxa6b\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d88d6e2c-b3e1-44d0-bfa2-a7241e0e43ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The page uses CSS Grid to center the button vertically and horizontally.","styles":{}}],"children":[]},{"id":"76677af5-49fc-4ef3-afe4-756dfacc700b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"min-height: 100vh","styles":{"code":true}},{"type":"text","text":" makes the layout full screen.\n\n","styles":{}},{"type":"text","text":"place-items: center","styles":{"code":true}},{"type":"text","text":" centers the button.\n\n","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" prevents the animated gradient from creating scrollbars.","styles":{}}],"children":[]},{"id":"3ed04987-3c4c-4a97-8e4e-59a71ef991b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base","styles":{}}],"children":[]},{"id":"6f6c1bbd-a30e-4fa2-b86c-a36628ce9444","type":"procode","props":{"code":".running-button {\n position: relative;\n width: var(--button-width);\n height: var(--button-height);\n padding: 0;\n border: none;\n border-radius: 999px;\n background: transparent;\n cursor: pointer;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"209ncxqs1\",\"name\":\"code\",\"code\":\".running-button {\\n position: relative;\\n width: var(--button-width);\\n height: var(--button-height);\\n padding: 0;\\n border: none;\\n border-radius: 999px;\\n background: transparent;\\n cursor: pointer;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"417018f2-706c-4167-88c2-60398bdc8f42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is a pill-shaped container.\n\n","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" is required because the internal layers use ","styles":{}},{"type":"text","text":"position: absolute","styles":{"code":true}},{"type":"text","text":".\n\n","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the animated lines clipped inside the pill shape.","styles":{}}],"children":[]},{"id":"1895c89c-8e36-4c13-bf16-21363aafc34c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Line Layer Setup","styles":{}}],"children":[]},{"id":"f1506c80-2149-4d2b-8011-dd1557450bea","type":"procode","props":{"code":".button-line {\n position: absolute;\n border-radius: 999px;\n pointer-events: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mhl3evpmo\",\"name\":\"code\",\"code\":\".button-line {\\n position: absolute;\\n border-radius: 999px;\\n pointer-events: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"505e25c6-0b46-4778-9832-2a74fa79ac2d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Both line layers are positioned absolutely inside the button.\n\n","styles":{}},{"type":"text","text":"pointer-events: none","styles":{"code":true}},{"type":"text","text":" makes sure the decorative line layers do not block button interaction.","styles":{}}],"children":[]},{"id":"86c31e1b-6153-41f3-aa10-0521638ef1e0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Running Line Logic","styles":{}}],"children":[]},{"id":"2fcdf22d-220c-400d-8c24-a72cc7cc9dde","type":"procode","props":{"code":".button-line::before {\n content: \"\";\n position: absolute;\n inset: -160%;\n\n background: conic-gradient(\n from 0deg,\n transparent 0deg,\n transparent 85deg,\n var(--purple-1) 130deg,\n var(--purple-2) 180deg,\n var(--purple-3) 230deg,\n transparent 280deg,\n transparent 360deg\n );\n\n animation: line-spin 2.8s linear infinite;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8jujgtxb7\",\"name\":\"code\",\"code\":\".button-line::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: -160%;\\n\\n background: conic-gradient(\\n from 0deg,\\n transparent 0deg,\\n transparent 85deg,\\n var(--purple-1) 130deg,\\n var(--purple-2) 180deg,\\n var(--purple-3) 230deg,\\n transparent 280deg,\\n transparent 360deg\\n );\\n\\n animation: line-spin 2.8s linear infinite;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8e3a6a24-4192-4fec-a1f4-7791ecbfd8ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each line uses a large pseudo-element with a ","styles":{}},{"type":"text","text":"conic-gradient","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"251d8ba3-51b6-4286-9f2b-420433566146","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The pseudo-element is much larger than the button because of:","styles":{}}],"children":[]},{"id":"1b5e503a-e654-4c4c-b758-434c98a3e436","type":"procode","props":{"code":"inset: -160%;","language":"javascript","filename":"","files":"[{\"id\":\"b8o0fo90v\",\"name\":\"code\",\"code\":\"inset: -160%;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd6618f7-b90d-4111-ad08-69f3ca0c11b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the rotating gradient smooth and prevents hard edges from appearing while it spins.","styles":{}}],"children":[]},{"id":"0491bf2a-9bea-45ed-9e2f-098f061bdac9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Outer Line","styles":{}}],"children":[]},{"id":"ef104bc5-9f77-474e-bbc0-46b0c59da5ac","type":"procode","props":{"code":".button-line-outer {\n inset: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hru3mu7jj\",\"name\":\"code\",\"code\":\".button-line-outer {\\n inset: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"489449f7-f850-4533-8124-6aa0a1e4896b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The outer line fills the full button area.\n\nIt becomes the outside animated border.","styles":{}}],"children":[]},{"id":"456c3065-7e18-4fcb-b439-a72a6e162a54","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Inner Line","styles":{}}],"children":[]},{"id":"4edb8152-3c59-4625-abbf-fe6f7f4375a3","type":"procode","props":{"code":".button-line-inner {\n inset: calc(var(--line-size) + var(--line-gap));\n}","language":"javascript","filename":"","files":"[{\"id\":\"074czzoeb\",\"name\":\"code\",\"code\":\".button-line-inner {\\n inset: calc(var(--line-size) + var(--line-gap));\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e3294d73-c41c-4d9a-af67-ce06e4b1d757","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The inner line is pushed inward using ","styles":{}},{"type":"text","text":"inset","styles":{"code":true}},{"type":"text","text":".\n\nThis creates the second running line inside the button.","styles":{}}],"children":[]},{"id":"eadf0412-5324-42f3-bdc9-c3dfd5be5a9e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The inner line also has different animation behavior:","styles":{}}],"children":[]},{"id":"401c9aca-d39c-4785-8736-87a1966063d0","type":"procode","props":{"code":".button-line-inner::before {\n animation-duration: 3.4s;\n animation-direction: reverse;\n}","language":"javascript","filename":"","files":"[{\"id\":\"79lwp3g7d\",\"name\":\"code\",\"code\":\".button-line-inner::before {\\n animation-duration: 3.4s;\\n animation-direction: reverse;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"429c8177-9fca-4666-a2c6-1da8a2524c6a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"So the inner line moves slower and in the opposite direction from the outer line.","styles":{}}],"children":[]},{"id":"5b6a127a-47ed-4814-a954-7cdbc71baf87","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Masking Flow","styles":{}}],"children":[]},{"id":"8dc411b6-e84b-4c22-bccc-85bdc1485cee","type":"procode","props":{"code":".button-line-outer,\n.button-line-inner {\n padding: var(--line-size);\n\n -webkit-mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n -webkit-mask-composite: xor;\n\n mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n mask-composite: exclude;\n}","language":"javascript","filename":"","files":"[{\"id\":\"t5s4uga93\",\"name\":\"code\",\"code\":\".button-line-outer,\\n.button-line-inner {\\n padding: var(--line-size);\\n\\n -webkit-mask:\\n linear-gradient(#000 0 0) content-box,\\n linear-gradient(#000 0 0);\\n -webkit-mask-composite: xor;\\n\\n mask:\\n linear-gradient(#000 0 0) content-box,\\n linear-gradient(#000 0 0);\\n mask-composite: exclude;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"43d2992d-666b-4b21-bac2-21b0d4f5f5c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is the most important part of the effect.","styles":{}}],"children":[]},{"id":"adf81475-91b4-4f32-91bc-bb17a4ad1645","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The mask cuts out the center of each line layer, leaving only a thin pill-shaped border visible. Without this mask, the conic gradient would fill the entire button area instead of appearing as a line.","styles":{}}],"children":[]},{"id":"68d9892e-bc04-4cba-8445-72de21c3333d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Content Layer","styles":{}}],"children":[]},{"id":"87d6bb1e-9931-4f2b-9665-dfc7f1c267e1","type":"procode","props":{"code":".button-content {\n position: absolute;\n inset: calc((var(--line-size) + var(--line-gap)) * 2);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--button-text);\n background: var(--button-bg);\n\n border-radius: 999px;\n\n font-size: 15px;\n font-weight: 700;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9votoa05h\",\"name\":\"code\",\"code\":\".button-content {\\n position: absolute;\\n inset: calc((var(--line-size) + var(--line-gap)) * 2);\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n color: var(--button-text);\\n background: var(--button-bg);\\n\\n border-radius: 999px;\\n\\n font-size: 15px;\\n font-weight: 700;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d91dcec7-53ae-42b1-aa45-c8b6a3e55399","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The content layer sits above the animated lines.\n\nIt creates the black center pill and holds the ","styles":{}},{"type":"text","text":"Button","styles":{"code":true}},{"type":"text","text":" text.","styles":{}}],"children":[]},{"id":"4809f03f-6623-4a1a-b98f-5d15dacf49f8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"inset","styles":{"code":true}},{"type":"text","text":" value gives enough space for the outer and inner running lines to remain visible.","styles":{}}],"children":[]},{"id":"404de21d-bf83-49ef-9a3d-1c2014462d6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover State","styles":{}}],"children":[]},{"id":"5854ea28-45cc-41db-94d3-f3d0d42493c4","type":"procode","props":{"code":".running-button:hover .button-content {\n background: var(--button-bg-hover);\n}","language":"javascript","filename":"","files":"[{\"id\":\"dctljeb2r\",\"name\":\"code\",\"code\":\".running-button:hover .button-content {\\n background: var(--button-bg-hover);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd2dac67-1ac5-489e-ae33-8d315a4d6470","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, only the inner background becomes slightly lighter.\n\nThe line animation does not need hover to run because it is already looping infinitely.","styles":{}}],"children":[]},{"id":"fa5f1bce-5624-4fe5-9a07-5f420364b8b5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active State","styles":{}}],"children":[]},{"id":"d165b1c4-3cb9-45dc-aad0-5c85c6daf340","type":"procode","props":{"code":".running-button:active .button-content {\n transform: scale(0.98);\n}","language":"javascript","filename":"","files":"[{\"id\":\"a6ub6zco2\",\"name\":\"code\",\"code\":\".running-button:active .button-content {\\n transform: scale(0.98);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a1e007db-8adb-4889-bbbd-1913fcbd0aa7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the center content scales down slightly.\n\nThis gives a subtle press effect without changing the border animation.","styles":{}}],"children":[]},{"id":"6f2b5582-3dfb-4e11-a293-f09db2a52441","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow","styles":{}}],"children":[]},{"id":"3e8f3a0b-7aa7-4266-b4a8-e8c60fdd49a1","type":"procode","props":{"code":"@keyframes line-spin {\n to {\n transform: rotate(360deg);\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"kok77ahba\",\"name\":\"code\",\"code\":\"@keyframes line-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0b6d3f50-cff7-44d4-abc7-39935f01f2b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The pseudo-element rotates continuously.\n\nBecause the pseudo-element contains a conic gradient, rotating it creates the illusion of a purple line moving around the pill button.","styles":{}}],"children":[]},{"id":"6d333b17-fb5f-4c36-9fe4-922126092684","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"3088358a-d00e-4dd1-a3a3-caa159c9c1ab","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .button-line::before {\n animation: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"y5022iqbo\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .button-line::before {\\n animation: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7332129e-f756-4bc6-ba1e-81e2a43c5411","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If the user has reduced motion enabled, the running line animation stops.\n\nThe button remains visible, but it no longer spins.","styles":{}}],"children":[]},{"id":"fdb72bdc-fd43-4822-9558-1a493d875300","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]