Spring Fill Button

[{"id":"21c729a5-4976-476c-90db-2871dce3d66e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"abc69440-bb76-4e0c-83be-97ef663f87b8","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\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.spring-button {\\n all: unset;\\n display: flex;\\n align-items: center;\\n position: relative;\\n padding: 0.6em 2em;\\n border: #5d3fd3 solid 0.15em;\\n border-radius: 999px;\\n color: #5d3fd3;\\n background: rgba(93, 63, 211, 0.08);\\n font-size: 1.5em;\\n font-weight: 600;\\n cursor: pointer;\\n overflow: hidden;\\n transition:\\n border 300ms,\\n color 300ms,\\n background 300ms;\\n user-select: none;\\n}\\n\\n.spring-button p {\\n position: relative;\\n z-index: 1;\\n margin: 0;\\n}\\n\\n.spring-button:hover {\\n color: #ffffff;\\n background: rgba(93, 63, 211, 0.18);\\n}\\n\\n.spring-button:active {\\n border-color: #4527a8;\\n}\\n\\n.spring-button::before,\\n.spring-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 50%;\\n width: 10em;\\n aspect-ratio: 1;\\n background: rgba(93, 63, 211, 0.55);\\n border-radius: 50%;\\n transform: translateY(-50%);\\n transition:\\n transform 500ms,\\n background 300ms;\\n}\\n\\n.spring-button::before {\\n left: 0;\\n transform: translate(-9.2em, -50%);\\n}\\n\\n.spring-button::after {\\n right: 0;\\n transform: translate(9.2em, -50%);\\n}\\n\\n.spring-button:hover::before {\\n transform: translate(-1.2em, -50%);\\n}\\n\\n.spring-button:hover::after {\\n transform: translate(1.2em, -50%);\\n}\\n\\n.spring-button:active::before,\\n.spring-button:active::after {\\n background: rgba(69, 39, 168, 0.55);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Spring 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":"0a847ff2-ff8c-40b4-95f3-faf3a34cbef8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d1f44fb7-7748-4579-9507-00e4f47b8b24","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"602b7218-0d9b-41a9-89fd-65bc42b52a63","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6affd489-0853-435d-8af6-8185e5800f2f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"aaaf45a8-d9e1-420f-bdc1-603698940b5e","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\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.spring-button {\\n all: unset;\\n display: flex;\\n align-items: center;\\n position: relative;\\n padding: 0.6em 2em;\\n border: #5d3fd3 solid 0.15em;\\n border-radius: 999px;\\n color: #5d3fd3;\\n background: rgba(93, 63, 211, 0.08);\\n font-size: 1.5em;\\n font-weight: 600;\\n cursor: pointer;\\n overflow: hidden;\\n transition:\\n border 300ms,\\n color 300ms,\\n background 300ms;\\n user-select: none;\\n}\\n\\n.spring-button p {\\n position: relative;\\n z-index: 1;\\n margin: 0;\\n}\\n\\n.spring-button:hover {\\n color: #ffffff;\\n background: rgba(93, 63, 211, 0.18);\\n}\\n\\n.spring-button:active {\\n border-color: #4527a8;\\n}\\n\\n.spring-button::before,\\n.spring-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 50%;\\n width: 10em;\\n aspect-ratio: 1;\\n background: rgba(93, 63, 211, 0.55);\\n border-radius: 50%;\\n transform: translateY(-50%);\\n transition:\\n transform 500ms,\\n background 300ms;\\n}\\n\\n.spring-button::before {\\n left: 0;\\n transform: translate(-9.2em, -50%);\\n}\\n\\n.spring-button::after {\\n right: 0;\\n transform: translate(9.2em, -50%);\\n}\\n\\n.spring-button:hover::before {\\n transform: translate(-1.2em, -50%);\\n}\\n\\n.spring-button:hover::after {\\n transform: translate(1.2em, -50%);\\n}\\n\\n.spring-button:active::before,\\n.spring-button:active::after {\\n background: rgba(69, 39, 168, 0.55);\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eccc2a6d-1361-4068-81dc-0400915ac92c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"e39f299e-4123-4589-9c40-c0b3b561179c","type":"divider","props":{},"children":[]},{"id":"8ba91b9c-c4bc-4eec-97a0-8b03b27ab1fa","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"de37f579-6c2c-4a99-8ae5-55eb61cab369","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a spring fill button. It starts as a purple outline pill with soft purple background, then on hover two big purple circles slide inward from left and right.","styles":{}}],"children":[]},{"id":"1ba4c94e-19c5-4892-abc2-075908a55a87","type":"procode","props":{"code":".spring-button {\n border: #5d3fd3 solid 0.15em;\n border-radius: 999px;\n color: #5d3fd3;\n background: rgba(93, 63, 211, 0.08);\n}","language":"javascript","filename":"","files":"[{\"id\":\"002ccaxq9\",\"name\":\"code\",\"code\":\".spring-button {\\n border: #5d3fd3 solid 0.15em;\\n border-radius: 999px;\\n color: #5d3fd3;\\n background: rgba(93, 63, 211, 0.08);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dcda129a-0632-47bc-b50f-d8db8fe898c4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The button is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the button in the center.","styles":{}}],"children":[]},{"id":"c796ac0f-942c-4bea-8165-b55f5e13599f","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uwznlrsir\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44005532-d397-4b8d-ab58-13b74c143d09","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".spring-button","styles":{"code":true}},{"type":"text","text":" uses ","styles":{}},{"type":"text","text":"all: unset","styles":{"code":true}},{"type":"text","text":" to remove native button styling, then rebuilds the button as a custom pill.","styles":{}}],"children":[]},{"id":"5488d36e-0376-47dc-9d0f-882bddac4054","type":"procode","props":{"code":".spring-button {\n all: unset;\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.6em 2em;\n border: #5d3fd3 solid 0.15em;\n border-radius: 999px;\n color: #5d3fd3;\n background: rgba(93, 63, 211, 0.08);\n font-size: 1.5em;\n font-weight: 600;\n cursor: pointer;\n overflow: hidden;\n user-select: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jxpn6xq5s\",\"name\":\"code\",\"code\":\".spring-button {\\n all: unset;\\n display: flex;\\n align-items: center;\\n position: relative;\\n padding: 0.6em 2em;\\n border: #5d3fd3 solid 0.15em;\\n border-radius: 999px;\\n color: #5d3fd3;\\n background: rgba(93, 63, 211, 0.08);\\n font-size: 1.5em;\\n font-weight: 600;\\n cursor: pointer;\\n overflow: hidden;\\n user-select: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1b0de6c1-5418-4d66-bf46-d4fc0c723d36","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"The animated fill circles are made with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":". They are absolutely positioned inside the button, so the button must be ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9ebf6cfd-bafc-46ed-a4a9-6f6c0915a658","type":"procode","props":{"code":".spring-button {\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8m3bv2w3m\",\"name\":\"code\",\"code\":\".spring-button {\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07d2704d-01ad-415e-b8c5-3f51082cd26a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"The fill circles are very large and start outside the pill. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" clips them inside the rounded button shape.","styles":{}}],"children":[]},{"id":"a320b623-2d4d-4e30-a379-9f30a24c2414","type":"procode","props":{"code":".spring-button {\n overflow: hidden;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s818sik0j\",\"name\":\"code\",\"code\":\".spring-button {\\n overflow: hidden;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de364c8d-3ab2-4d86-9d3b-f8290d353f09","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer\n","styles":{"bold":true}},{"type":"text","text":"The text is wrapped in a ","styles":{}},{"type":"text","text":"p","styles":{"code":true}},{"type":"text","text":" tag. It uses ","styles":{}},{"type":"text","text":"z-index: 1","styles":{"code":true}},{"type":"text","text":" so the text stays above the two animated fill circles.","styles":{}}],"children":[]},{"id":"a7fd9930-def0-4b38-a069-ff779944822e","type":"procode","props":{"code":".spring-button p {\n position: relative;\n z-index: 1;\n margin: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mbj0ye9lm\",\"name\":\"code\",\"code\":\".spring-button p {\\n position: relative;\\n z-index: 1;\\n margin: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"930f2398-c1f4-44e4-b9a8-1926a9f017c4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Button State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the text color changes to white and the button background becomes slightly stronger purple.","styles":{}}],"children":[]},{"id":"8db60a3c-9a6a-475b-a75b-aa90ec3fe43b","type":"procode","props":{"code":".spring-button:hover {\n color: #ffffff;\n background: rgba(93, 63, 211, 0.18);\n}","language":"javascript","filename":"","files":"[{\"id\":\"azok2s65u\",\"name\":\"code\",\"code\":\".spring-button:hover {\\n color: #ffffff;\\n background: rgba(93, 63, 211, 0.18);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a7b3faa-e9eb-4702-a9de-0cc9faef4f7c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active State\n","styles":{"bold":true}},{"type":"text","text":"When clicked, the border changes to a darker purple.","styles":{}}],"children":[]},{"id":"e8b13174-9d6b-4dc9-b99f-73a918a5a5aa","type":"procode","props":{"code":".spring-button:active {\n border-color: #4527a8;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xcwjt6ul9\",\"name\":\"code\",\"code\":\".spring-button:active {\\n border-color: #4527a8;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b9690404-47fc-4a3f-9ea6-5fc749010f72","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Circle Setup\n","styles":{"bold":true}},{"type":"text","text":"Both pseudo-elements are large circles. They are vertically centered with ","styles":{}},{"type":"text","text":"top: 50%","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"translateY(-50%)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4ec9377d-bc8f-4553-b1f9-9e444ca000b6","type":"procode","props":{"code":".spring-button::before,\n.spring-button::after {\n content: \"\";\n position: absolute;\n top: 50%;\n width: 10em;\n aspect-ratio: 1;\n background: rgba(93, 63, 211, 0.55);\n border-radius: 50%;\n transform: translateY(-50%);\n transition:\n transform 500ms,\n background 300ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vbct8tndx\",\"name\":\"code\",\"code\":\".spring-button::before,\\n.spring-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 50%;\\n width: 10em;\\n aspect-ratio: 1;\\n background: rgba(93, 63, 211, 0.55);\\n border-radius: 50%;\\n transform: translateY(-50%);\\n transition:\\n transform 500ms,\\n background 300ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bcbbe1ed-29a6-4c02-8cc1-5a142e4ed8cf","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Left Circle Start Position\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" circle starts far outside the left side.","styles":{}}],"children":[]},{"id":"3c174bbc-723b-446d-b9aa-a0abfc9309db","type":"procode","props":{"code":".spring-button::before {\n left: 0;\n transform: translate(-9.2em, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ibr748g9r\",\"name\":\"code\",\"code\":\".spring-button::before {\\n left: 0;\\n transform: translate(-9.2em, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd6f5610-887b-4a8b-b259-6d8ba06c533a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Right Circle Start Position\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" circle starts far outside the right side.","styles":{}}],"children":[]},{"id":"ce855ee6-0a2a-46e7-9258-80129a8c530b","type":"procode","props":{"code":".spring-button::after {\n right: 0;\n transform: translate(9.2em, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"uzcl3pl2t\",\"name\":\"code\",\"code\":\".spring-button::after {\\n right: 0;\\n transform: translate(9.2em, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62ed9e77-d8d6-4bb6-b4aa-e16a6a4ab450","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Movement\n","styles":{"bold":true}},{"type":"text","text":"On hover, both circles move inward, creating the spring fill effect from both sides.","styles":{}}],"children":[]},{"id":"d5ec72fb-46e7-44a0-9a4c-6ba47fb9157a","type":"procode","props":{"code":".spring-button:hover::before {\n transform: translate(-1.2em, -50%);\n}\n\n.spring-button:hover::after {\n transform: translate(1.2em, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"f5c03i2xk\",\"name\":\"code\",\"code\":\".spring-button:hover::before {\\n transform: translate(-1.2em, -50%);\\n}\\n\\n.spring-button:hover::after {\\n transform: translate(1.2em, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a45b189-a6f5-4cd2-83fb-14ac9715a7da","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Fill State\n","styles":{"bold":true}},{"type":"text","text":"On click, both fill circles change to a darker purple.","styles":{}}],"children":[]},{"id":"ab5e5bce-44ea-4164-a16c-8cfb7ceaab07","type":"procode","props":{"code":".spring-button:active::before,\n.spring-button:active::after {\n background: rgba(69, 39, 168, 0.55);\n}","language":"javascript","filename":"","files":"[{\"id\":\"q2g8kw6ul\",\"name\":\"code\",\"code\":\".spring-button:active::before,\\n.spring-button:active::after {\\n background: rgba(69, 39, 168, 0.55);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1670a3df-5ea0-4bed-9403-cdadb3852136","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main animation flow. The left circle comes from the left, and the right circle comes from the right.","styles":{}}],"children":[]},{"id":"515903b0-9ca5-4502-8be7-63132ca7e794","type":"procode","props":{"code":".spring-button::before {\n left: 0;\n transform: translate(-9.2em, -50%);\n}\n\n.spring-button::after {\n right: 0;\n transform: translate(9.2em, -50%);\n}\n\n.spring-button:hover::before {\n transform: translate(-1.2em, -50%);\n}\n\n.spring-button:hover::after {\n transform: translate(1.2em, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"bu5giqwgc\",\"name\":\"code\",\"code\":\".spring-button::before {\\n left: 0;\\n transform: translate(-9.2em, -50%);\\n}\\n\\n.spring-button::after {\\n right: 0;\\n transform: translate(9.2em, -50%);\\n}\\n\\n.spring-button:hover::before {\\n transform: translate(-1.2em, -50%);\\n}\\n\\n.spring-button:hover::after {\\n transform: translate(1.2em, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e208af2-a29c-427c-a184-01848cac9a04","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why Two Pseudo-Elements Are Used\n","styles":{"bold":true}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" handles the left circle, and ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" handles the right circle. This creates a balanced two-side fill instead of a single-direction fill.","styles":{}}],"children":[]},{"id":"d9d9204e-8461-43d8-aa00-8866e602c450","type":"procode","props":{"code":".spring-button::before {\n left: 0;\n}\n\n.spring-button::after {\n right: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xbnjwwocg\",\"name\":\"code\",\"code\":\".spring-button::before {\\n left: 0;\\n}\\n\\n.spring-button::after {\\n right: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"49faec9b-15ae-48bb-bb5b-493268671207","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"aspect-ratio: 1","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The fill needs to stay perfectly square before ","styles":{}},{"type":"text","text":"border-radius: 50%","styles":{"code":true}},{"type":"text","text":" turns it into a circle.","styles":{}}],"children":[]},{"id":"78ecbf5f-0a68-414c-9ac7-eafc56f2c3c9","type":"procode","props":{"code":".spring-button::before,\n.spring-button::after {\n width: 10em;\n aspect-ratio: 1;\n border-radius: 50%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"72hy9h3jo\",\"name\":\"code\",\"code\":\".spring-button::before,\\n.spring-button::after {\\n width: 10em;\\n aspect-ratio: 1;\\n border-radius: 50%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1177c9e8-b8c2-4c75-9d4f-bfb946729974","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button color changes use ","styles":{}},{"type":"text","text":"300ms","styles":{"code":true}},{"type":"text","text":", while the fill circle movement uses ","styles":{}},{"type":"text","text":"500ms","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"49bd0394-15ec-4fba-a2c7-beefeab786d1","type":"procode","props":{"code":".spring-button {\n transition:\n border 300ms,\n color 300ms,\n background 300ms;\n}\n\n.spring-button::before,\n.spring-button::after {\n transition:\n transform 500ms,\n background 300ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"i3y83cmvg\",\"name\":\"code\",\"code\":\".spring-button {\\n transition:\\n border 300ms,\\n color 300ms,\\n background 300ms;\\n}\\n\\n.spring-button::before,\\n.spring-button::after {\\n transition:\\n transform 500ms,\\n background 300ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0a673ef6-4c5f-4672-9500-415433bcd1cb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the fill movement speed here:","styles":{}}],"children":[]},{"id":"9539e9df-57a9-438b-8bcb-ade49f147582","type":"procode","props":{"code":".spring-button::before,\n.spring-button::after {\n transition: transform 500ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"u9tsr7voj\",\"name\":\"code\",\"code\":\".spring-button::before,\\n.spring-button::after {\\n transition: transform 500ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8b0964b5-2059-4dba-8523-aa217274183e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text, border, and background speed here:","styles":{}}],"children":[]},{"id":"4a8aee24-d73f-4dbd-bc4d-354c4bf20c6f","type":"procode","props":{"code":".spring-button {\n transition:\n border 300ms,\n color 300ms,\n background 300ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o61g33u7x\",\"name\":\"code\",\"code\":\".spring-button {\\n transition:\\n border 300ms,\\n color 300ms,\\n background 300ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9ef07993-4080-4ede-8179-632301a93200","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the main purple color here:","styles":{}}],"children":[]},{"id":"b08387fc-3143-4351-8c5f-66bfcc8435e8","type":"procode","props":{"code":".spring-button {\n border: #5d3fd3 solid 0.15em;\n color: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rwoxlr9e1\",\"name\":\"code\",\"code\":\".spring-button {\\n border: #5d3fd3 solid 0.15em;\\n color: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58283e50-d9ad-4c0f-988c-facfa324a1a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the soft button background here:","styles":{}}],"children":[]},{"id":"085545b8-fcda-4057-8d8b-3a439610c047","type":"procode","props":{"code":".spring-button {\n background: rgba(93, 63, 211, 0.08);\n}","language":"javascript","filename":"","files":"[{\"id\":\"a1ty487rh\",\"name\":\"code\",\"code\":\".spring-button {\\n background: rgba(93, 63, 211, 0.08);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e0195f5-4882-49bc-9636-c605e24c76e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the fill circle color here:","styles":{}}],"children":[]},{"id":"3d85df7c-eb2d-4382-833a-80fe50e60064","type":"procode","props":{"code":".spring-button::before,\n.spring-button::after {\n background: rgba(93, 63, 211, 0.55);\n}","language":"javascript","filename":"","files":"[{\"id\":\"36ck5g6t0\",\"name\":\"code\",\"code\":\".spring-button::before,\\n.spring-button::after {\\n background: rgba(93, 63, 211, 0.55);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0f0670e1-84cb-452d-bfab-c5be5e8210e5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the active color here:","styles":{}}],"children":[]},{"id":"a45c4338-d97a-4716-9442-03686912f539","type":"procode","props":{"code":".spring-button:active {\n border-color: #4527a8;\n}\n\n.spring-button:active::before,\n.spring-button:active::after {\n background: rgba(69, 39, 168, 0.55);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3a35oqky1\",\"name\":\"code\",\"code\":\".spring-button:active {\\n border-color: #4527a8;\\n}\\n\\n.spring-button:active::before,\\n.spring-button:active::after {\\n background: rgba(69, 39, 168, 0.55);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13948b50-3a8c-4e7e-810b-348efd9a71fe","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the button padding here:","styles":{}}],"children":[]},{"id":"649d8456-313b-4b44-821f-412e119703f3","type":"procode","props":{"code":".spring-button {\n padding: 0.6em 2em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1rx4xnl4u\",\"name\":\"code\",\"code\":\".spring-button {\\n padding: 0.6em 2em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78285d42-9621-4cbf-8575-42adec176039","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button radius here:","styles":{}}],"children":[]},{"id":"10be05d3-912d-476a-af52-d9ac93e0ecb5","type":"procode","props":{"code":".spring-button {\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"40iffj3rr\",\"name\":\"code\",\"code\":\".spring-button {\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"72621474-4bd8-47d6-ab9e-7646ed813152","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"4bc93e05-c6cc-4636-9c3f-1c6e09a925f1","type":"procode","props":{"code":".spring-button {\n font-size: 1.5em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"p7qtizl1p\",\"name\":\"code\",\"code\":\".spring-button {\\n font-size: 1.5em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3b158aee-41c3-45a9-b132-f0a87af5b362","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the fill circle size here:","styles":{}}],"children":[]},{"id":"37c79845-f417-4d16-989b-2f61c5e7d543","type":"procode","props":{"code":".spring-button::before,\n.spring-button::after {\n width: 10em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"a3w9ik4jj\",\"name\":\"code\",\"code\":\".spring-button::before,\\n.spring-button::after {\\n width: 10em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9dc4574d-1650-4168-8afc-14df11fd367e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the button text inside ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"bd7517d6-5f34-49d7-8d8f-14c6a8d66b38","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"h72438lqj\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cd63b60d-9706-43a0-8a08-798948352209","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]