Clean Pill Glow Button

[{"id":"e32d4518-576e-437e-9e78-b9af25e5bef8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"807d8d37-4d94-4efb-9024-e0f0d030e465","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.glow-button {\\n position: relative;\\n width: 256px;\\n height: 64px;\\n padding: 0 32px;\\n overflow: hidden;\\n border: none;\\n border-radius: 999px;\\n background: #020617;\\n color: #ffffff;\\n cursor: pointer;\\n text-align: left;\\n font-size: 16px;\\n font-weight: 700;\\n text-decoration: none;\\n transform-origin: left;\\n transition:\\n color 0.5s ease,\\n transform 0.5s ease;\\n}\\n\\n.glow-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n z-index: 1;\\n width: 48px;\\n height: 48px;\\n right: 12px;\\n top: 8px;\\n border-radius: 999px;\\n background: #7c3aed;\\n filter: blur(16px);\\n transition:\\n right 0.5s ease,\\n bottom 0.5s ease,\\n top 0.5s ease,\\n box-shadow 0.5s ease,\\n filter 0.5s ease;\\n}\\n\\n.glow-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n z-index: 1;\\n width: 80px;\\n height: 80px;\\n right: 44px;\\n top: 10px;\\n border-radius: 999px;\\n background: #ec4899;\\n filter: blur(18px);\\n transition:\\n right 0.5s ease,\\n top 0.5s ease;\\n}\\n\\n.glow-button:hover {\\n color: #ffffff;\\n text-decoration: none;\\n}\\n\\n.glow-button:hover::before {\\n right: 56px;\\n top: auto;\\n bottom: -32px;\\n filter: blur(16px);\\n box-shadow: 20px 20px 20px 30px #9333ea;\\n}\\n\\n.glow-button:hover::after {\\n right: -32px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .glow-button,\\n .glow-button::before,\\n .glow-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Clean Pill Glow 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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"9086783e-f76a-43db-b718-072f35f441c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b8b55c0e-7282-4e28-991d-16d9ad250561","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"3da536df-93d8-497c-9baf-c9d7c31ec087","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc2f8f20-0aa7-4020-bcd8-4a86d0e26a0a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"95b2ad27-f1b8-4825-9fe6-e0a4076313b6","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.glow-button {\\n position: relative;\\n width: 256px;\\n height: 64px;\\n padding: 0 32px;\\n overflow: hidden;\\n border: none;\\n border-radius: 999px;\\n background: #020617;\\n color: #ffffff;\\n cursor: pointer;\\n text-align: left;\\n font-size: 16px;\\n font-weight: 700;\\n text-decoration: none;\\n transform-origin: left;\\n transition:\\n color 0.5s ease,\\n transform 0.5s ease;\\n}\\n\\n.glow-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n z-index: 1;\\n width: 48px;\\n height: 48px;\\n right: 12px;\\n top: 8px;\\n border-radius: 999px;\\n background: #7c3aed;\\n filter: blur(16px);\\n transition:\\n right 0.5s ease,\\n bottom 0.5s ease,\\n top 0.5s ease,\\n box-shadow 0.5s ease,\\n filter 0.5s ease;\\n}\\n\\n.glow-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n z-index: 1;\\n width: 80px;\\n height: 80px;\\n right: 44px;\\n top: 10px;\\n border-radius: 999px;\\n background: #ec4899;\\n filter: blur(18px);\\n transition:\\n right 0.5s ease,\\n top 0.5s ease;\\n}\\n\\n.glow-button:hover {\\n color: #ffffff;\\n text-decoration: none;\\n}\\n\\n.glow-button:hover::before {\\n right: 56px;\\n top: auto;\\n bottom: -32px;\\n filter: blur(16px);\\n box-shadow: 20px 20px 20px 30px #9333ea;\\n}\\n\\n.glow-button:hover::after {\\n right: -32px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .glow-button,\\n .glow-button::before,\\n .glow-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"97327d8f-cdc6-4955-a7a7-87eddbdbbd81","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"2c7971ca-c083-4db8-bd92-0178f8335a27","type":"divider","props":{},"children":[]},{"id":"90b2f2b5-cadb-4059-b7c1-7cdef2ee2481","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"c5d23979-c816-40cf-a8ef-670519b17fc3","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 clean pill glow button. It uses a dark navy pill base with two blurred glow blobs inside the button: purple and pink.","styles":{}}],"children":[]},{"id":"c29a0ec2-5dee-47b7-8803-27fe3de978bd","type":"procode","props":{"code":".glow-button {\n background: #020617;\n color: #ffffff;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s0ihhcwkb\",\"name\":\"code\",\"code\":\".glow-button {\\n background: #020617;\\n color: #ffffff;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7970ce30-4ebe-4517-a648-dc313dbfc933","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 middle.","styles":{}}],"children":[]},{"id":"11177a67-72dd-4fb1-9b7e-57462bdea132","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kovl6rgb8\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"09d41593-46ea-4f80-b43c-28730d27778e","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":".glow-button","styles":{"code":true}},{"type":"text","text":" is a wide pill button with fixed width and height. It uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" so the glow layers can be positioned inside it.","styles":{}}],"children":[]},{"id":"9160f886-93cd-4237-83ec-cc41e8b15b4d","type":"procode","props":{"code":".glow-button {\n position: relative;\n width: 256px;\n height: 64px;\n padding: 0 32px;\n overflow: hidden;\n border: none;\n border-radius: 999px;\n background: #020617;\n color: #ffffff;\n cursor: pointer;\n text-align: left;\n font-size: 16px;\n font-weight: 700;\n text-decoration: none;\n transform-origin: left;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ajtzkmnlk\",\"name\":\"code\",\"code\":\".glow-button {\\n position: relative;\\n width: 256px;\\n height: 64px;\\n padding: 0 32px;\\n overflow: hidden;\\n border: none;\\n border-radius: 999px;\\n background: #020617;\\n color: #ffffff;\\n cursor: pointer;\\n text-align: left;\\n font-size: 16px;\\n font-weight: 700;\\n text-decoration: none;\\n transform-origin: left;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13f7e3a2-2cfb-4510-8af3-56e88c02df1b","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 purple and pink glow blobs are larger and blurred. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the glow clipped inside the pill shape.","styles":{}}],"children":[]},{"id":"c3c14054-f483-45e7-a190-76e8cbeafa0a","type":"procode","props":{"code":".glow-button {\n overflow: hidden;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"w0865pejy\",\"name\":\"code\",\"code\":\".glow-button {\\n overflow: hidden;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7f7bbdb7-2567-4d34-a327-00f12730271f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Glow Layer\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the purple glow. It starts near the right side of the button.","styles":{}}],"children":[]},{"id":"9da5b9de-1889-4cec-91d8-66e5cd39da58","type":"procode","props":{"code":".glow-button::before {\n content: \"\";\n position: absolute;\n z-index: 1;\n width: 48px;\n height: 48px;\n right: 12px;\n top: 8px;\n border-radius: 999px;\n background: #7c3aed;\n filter: blur(16px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"6xl8ycoh8\",\"name\":\"code\",\"code\":\".glow-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n z-index: 1;\\n width: 48px;\\n height: 48px;\\n right: 12px;\\n top: 8px;\\n border-radius: 999px;\\n background: #7c3aed;\\n filter: blur(16px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"edd7621c-5d59-40fa-912a-4bed29570432","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Pink Glow Layer\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the pink glow. It is larger than the purple glow and starts slightly more toward the center.","styles":{}}],"children":[]},{"id":"6f6a5db0-ff5f-48c7-8323-2aac3592df74","type":"procode","props":{"code":".glow-button::after {\n content: \"\";\n position: absolute;\n z-index: 1;\n width: 80px;\n height: 80px;\n right: 44px;\n top: 10px;\n border-radius: 999px;\n background: #ec4899;\n filter: blur(18px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"qhijlxma8\",\"name\":\"code\",\"code\":\".glow-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n z-index: 1;\\n width: 80px;\\n height: 80px;\\n right: 44px;\\n top: 10px;\\n border-radius: 999px;\\n background: #ec4899;\\n filter: blur(18px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"60384dd2-0428-4948-a59b-3ae6fd9cfa55","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 button keeps the text white and removes text decoration.","styles":{}}],"children":[]},{"id":"0a19d7d8-7afa-455a-bd5a-97c2d882f482","type":"procode","props":{"code":".glow-button:hover {\n color: #ffffff;\n text-decoration: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ch49vd9om\",\"name\":\"code\",\"code\":\".glow-button:hover {\\n color: #ffffff;\\n text-decoration: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e146f37-ce28-4793-b636-12d131cab509","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Glow Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the purple glow moves lower and more toward the center. It also gets a stronger purple shadow.","styles":{}}],"children":[]},{"id":"e40ab449-d22b-4602-b714-b179b55cecd4","type":"procode","props":{"code":".glow-button:hover::before {\n right: 56px;\n top: auto;\n bottom: -32px;\n filter: blur(16px);\n box-shadow: 20px 20px 20px 30px #9333ea;\n}","language":"javascript","filename":"","files":"[{\"id\":\"simk842ai\",\"name\":\"code\",\"code\":\".glow-button:hover::before {\\n right: 56px;\\n top: auto;\\n bottom: -32px;\\n filter: blur(16px);\\n box-shadow: 20px 20px 20px 30px #9333ea;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d62a5f88-5f59-4c9f-a255-896cbc216300","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Pink Glow Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the pink glow moves farther to the right.","styles":{}}],"children":[]},{"id":"9cdee48d-7eff-409a-a654-bae848e070c4","type":"procode","props":{"code":".glow-button:hover::after {\n right: -32px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wwvv8kfln\",\"name\":\"code\",\"code\":\".glow-button:hover::after {\\n right: -32px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73ace3a5-c53c-4519-9553-85ff1440fc9e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button and both glow layers animate with ","styles":{}},{"type":"text","text":"0.5s ease","styles":{"code":true}},{"type":"text","text":". The main movement happens by changing ","styles":{}},{"type":"text","text":"right","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"top","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"bottom","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"filter","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b8f5dcfe-992f-4c55-a9e4-af54d39bc450","type":"procode","props":{"code":".glow-button {\n transition:\n color 0.5s ease,\n transform 0.5s ease;\n}\n\n.glow-button::before {\n transition:\n right 0.5s ease,\n bottom 0.5s ease,\n top 0.5s ease,\n box-shadow 0.5s ease,\n filter 0.5s ease;\n}\n\n.glow-button::after {\n transition:\n right 0.5s ease,\n top 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9to645y7x\",\"name\":\"code\",\"code\":\".glow-button {\\n transition:\\n color 0.5s ease,\\n transform 0.5s ease;\\n}\\n\\n.glow-button::before {\\n transition:\\n right 0.5s ease,\\n bottom 0.5s ease,\\n top 0.5s ease,\\n box-shadow 0.5s ease,\\n filter 0.5s ease;\\n}\\n\\n.glow-button::after {\\n transition:\\n right 0.5s ease,\\n top 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fbcc6675-96ed-496f-879b-ce15761fce6d","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 visual flow. The purple glow shifts downward and expands with shadow, while the pink glow slides to the right.","styles":{}}],"children":[]},{"id":"da4d5d8c-b5ec-4208-b62c-8a90dad57df8","type":"procode","props":{"code":".glow-button:hover::before {\n right: 56px;\n top: auto;\n bottom: -32px;\n box-shadow: 20px 20px 20px 30px #9333ea;\n}\n\n.glow-button:hover::after {\n right: -32px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"adwbdf03z\",\"name\":\"code\",\"code\":\".glow-button:hover::before {\\n right: 56px;\\n top: auto;\\n bottom: -32px;\\n box-shadow: 20px 20px 20px 30px #9333ea;\\n}\\n\\n.glow-button:hover::after {\\n right: -32px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d93654a6-c223-4ee6-a8dd-49975264259f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" And ","styles":{"bold":true}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" Are Used\n","styles":{"bold":true}},{"type":"text","text":"The button needs two independent glow layers. ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" handles the purple glow, and ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" handles the pink glow.","styles":{}}],"children":[]},{"id":"37920523-0fe4-4944-a8f9-e0230e6ca370","type":"procode","props":{"code":".glow-button::before {\n background: #7c3aed;\n}\n\n.glow-button::after {\n background: #ec4899;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ojg6hne7c\",\"name\":\"code\",\"code\":\".glow-button::before {\\n background: #7c3aed;\\n}\\n\\n.glow-button::after {\\n background: #ec4899;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1fd6e274-67b2-4761-a597-a16c4b0b8f7c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"z-index: 1","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"Both glow layers use ","styles":{}},{"type":"text","text":"z-index: 1","styles":{"code":true}},{"type":"text","text":", so they sit inside the button layer. Because there is no extra text wrapper, the glow appears visually over the button background.","styles":{}}],"children":[]},{"id":"59124386-5f77-4bb6-a55c-9936a791f423","type":"procode","props":{"code":".glow-button::before,\n.glow-button::after {\n z-index: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"y8pggcwl3\",\"name\":\"code\",\"code\":\".glow-button::before,\\n.glow-button::after {\\n z-index: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f93d6d5-d552-46a7-a4d1-7fceb7e93943","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"If the user prefers reduced motion, all transitions are removed.","styles":{}}],"children":[]},{"id":"be21ae10-4b2f-464e-bb4e-0b4638195df8","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .glow-button,\n .glow-button::before,\n .glow-button::after {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"emyz3o33e\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .glow-button,\\n .glow-button::before,\\n .glow-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"511362eb-7f6c-4cda-ae03-fefd5e934d1c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the animation speed here:","styles":{}}],"children":[]},{"id":"28e12157-8e98-45be-87b9-3303c3a33401","type":"procode","props":{"code":".glow-button {\n transition:\n color 0.5s ease,\n transform 0.5s ease;\n}\n\n.glow-button::before,\n.glow-button::after {\n transition: right 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vvg1141ru\",\"name\":\"code\",\"code\":\".glow-button {\\n transition:\\n color 0.5s ease,\\n transform 0.5s ease;\\n}\\n\\n.glow-button::before,\\n.glow-button::after {\\n transition: right 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c9e54eab-8200-4cef-b607-02541b89a8ba","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the page background here:","styles":{}}],"children":[]},{"id":"39854f1e-a98c-428e-a694-114f5cd27245","type":"procode","props":{"code":"body {\n background: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4mesi99nv\",\"name\":\"code\",\"code\":\"body {\\n background: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d25b808-c33f-43be-b07b-bc54fdef65f0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button background here:","styles":{}}],"children":[]},{"id":"0cad4f07-b0af-4474-80d9-024e5f89079f","type":"procode","props":{"code":".glow-button {\n background: #020617;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ax92d5c8k\",\"name\":\"code\",\"code\":\".glow-button {\\n background: #020617;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2baeeadf-bd5b-484c-a258-a0b793e3dffa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the purple glow here:","styles":{}}],"children":[]},{"id":"252242e6-886d-4802-ac0b-147d9ebad246","type":"procode","props":{"code":".glow-button::before {\n background: #7c3aed;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nlgejzww\",\"name\":\"code\",\"code\":\".glow-button::before {\\n background: #7c3aed;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"16a1b86f-1d45-44fd-9e04-a23ad9904167","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pink glow here:","styles":{}}],"children":[]},{"id":"c920eda3-9e9c-4703-98e9-42e9bbc6e982","type":"procode","props":{"code":".glow-button::after {\n background: #ec4899;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ccv033z7g\",\"name\":\"code\",\"code\":\".glow-button::after {\\n background: #ec4899;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a89bd193-9826-4a00-973e-d70ad6c39663","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the stronger hover glow here:","styles":{}}],"children":[]},{"id":"e9de93a1-55fb-4284-b4a8-bb65095f985b","type":"procode","props":{"code":".glow-button:hover::before {\n box-shadow: 20px 20px 20px 30px #9333ea;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m4ag3kwwd\",\"name\":\"code\",\"code\":\".glow-button:hover::before {\\n box-shadow: 20px 20px 20px 30px #9333ea;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec538019-2aca-47e0-87a2-670f6548855d","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 size here:","styles":{}}],"children":[]},{"id":"f768ff5f-b54d-4d05-aef9-d2f248728712","type":"procode","props":{"code":".glow-button {\n width: 256px;\n height: 64px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"44lxcpv7t\",\"name\":\"code\",\"code\":\".glow-button {\\n width: 256px;\\n height: 64px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"343c199e-e2e2-400e-8622-c06e69aaabc4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button padding here:","styles":{}}],"children":[]},{"id":"17e47939-ffa6-4cee-9326-5d9914131bf2","type":"procode","props":{"code":".glow-button {\n padding: 0 32px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xpyde9ymf\",\"name\":\"code\",\"code\":\".glow-button {\\n padding: 0 32px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de95e3ac-b4f7-4f59-b4fd-5aa99efafd50","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pill radius here:","styles":{}}],"children":[]},{"id":"1c62b6e7-48ad-4c5e-8453-c0dbdbc2af88","type":"procode","props":{"code":".glow-button {\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fywujhszt\",\"name\":\"code\",\"code\":\".glow-button {\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4c04a17f-1683-450c-942a-711fa4bd1a8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the purple glow size here:","styles":{}}],"children":[]},{"id":"0b7402eb-04af-44ca-b3fe-23ba8f08e1cd","type":"procode","props":{"code":".glow-button::before {\n width: 48px;\n height: 48px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xo0kbi4vl\",\"name\":\"code\",\"code\":\".glow-button::before {\\n width: 48px;\\n height: 48px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b728f8c4-af64-41ad-bda3-a1d8a7cade53","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pink glow size here:","styles":{}}],"children":[]},{"id":"b4465175-aa0b-46dc-b08a-3625561afd65","type":"procode","props":{"code":".glow-button::after {\n width: 80px;\n height: 80px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yv3yym3qu\",\"name\":\"code\",\"code\":\".glow-button::after {\\n width: 80px;\\n height: 80px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58e06fcb-4356-4b3a-8ddc-2c75fe337c99","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]