Purple Gradient Button

[{"id":"7020430e-c330-4e3b-aee0-683b763b73cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"24966adf-fe4b-4936-961c-a05353d8b8fd","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: #000;\\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.gradient-button {\\n position: relative;\\n padding: 11px 30px;\\n font-size: 18px;\\n font-weight: 700;\\n background: transparent;\\n border: none;\\n cursor: pointer;\\n border-radius: 999px;\\n overflow: hidden;\\n isolation: isolate;\\n transition: transform 0.2s ease;\\n}\\n\\n.gradient-button:hover {\\n transform: scale(1.03);\\n}\\n\\n.gradient-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: -45%;\\n background: conic-gradient(\\n from 0deg,\\n #f0abfc,\\n #e879f9,\\n #a855f7,\\n #7c3aed,\\n #4f46e5,\\n #c084fc,\\n #f0abfc\\n );\\n z-index: -2;\\n filter: blur(8px);\\n transform: rotate(0deg);\\n transition: transform 1.4s ease-in-out;\\n}\\n\\n.gradient-button:hover::before {\\n transform: rotate(180deg);\\n}\\n\\n.gradient-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 3px;\\n background: #050505;\\n border-radius: inherit;\\n z-index: -1;\\n}\\n\\n.gradient-text {\\n color: transparent;\\n background: linear-gradient(90deg, #f5d0fe, #e879f9, #c084fc, #a78bfa);\\n background-clip: text;\\n -webkit-background-clip: text;\\n text-shadow: 0 0 10px rgba(232, 121, 249, 0.45);\\n}\\n\\n.gradient-button:hover .gradient-text {\\n animation: text-glow 1.6s ease-in-out infinite;\\n}\\n\\n.gradient-button:active {\\n transform: scale(0.98);\\n}\\n\\n@keyframes text-glow {\\n 0% {\\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\\n }\\n\\n 50% {\\n text-shadow: 0 0 16px rgba(192, 132, 252, 0.75);\\n }\\n\\n 100% {\\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .gradient-button,\\n .gradient-button::before,\\n .gradient-text {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Purple Gradient 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":"e0a1163c-f8c1-46c2-9bf3-7f24386e8028","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"709e8062-8907-45df-8eaa-4fef7049e708","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":"69aaa9a4-48a1-4ba3-a150-d762ab9a1279","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"51566362-cf6a-4ebc-b4b1-62c07342054f","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: #000;\\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.gradient-button {\\n position: relative;\\n padding: 11px 30px;\\n font-size: 18px;\\n font-weight: 700;\\n background: transparent;\\n border: none;\\n cursor: pointer;\\n border-radius: 999px;\\n overflow: hidden;\\n isolation: isolate;\\n transition: transform 0.2s ease;\\n}\\n\\n.gradient-button:hover {\\n transform: scale(1.03);\\n}\\n\\n.gradient-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: -45%;\\n background: conic-gradient(\\n from 0deg,\\n #f0abfc,\\n #e879f9,\\n #a855f7,\\n #7c3aed,\\n #4f46e5,\\n #c084fc,\\n #f0abfc\\n );\\n z-index: -2;\\n filter: blur(8px);\\n transform: rotate(0deg);\\n transition: transform 1.4s ease-in-out;\\n}\\n\\n.gradient-button:hover::before {\\n transform: rotate(180deg);\\n}\\n\\n.gradient-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 3px;\\n background: #050505;\\n border-radius: inherit;\\n z-index: -1;\\n}\\n\\n.gradient-text {\\n color: transparent;\\n background: linear-gradient(90deg, #f5d0fe, #e879f9, #c084fc, #a78bfa);\\n background-clip: text;\\n -webkit-background-clip: text;\\n text-shadow: 0 0 10px rgba(232, 121, 249, 0.45);\\n}\\n\\n.gradient-button:hover .gradient-text {\\n animation: text-glow 1.6s ease-in-out infinite;\\n}\\n\\n.gradient-button:active {\\n transform: scale(0.98);\\n}\\n\\n@keyframes text-glow {\\n 0% {\\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\\n }\\n\\n 50% {\\n text-shadow: 0 0 16px rgba(192, 132, 252, 0.75);\\n }\\n\\n 100% {\\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .gradient-button,\\n .gradient-button::before,\\n .gradient-text {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"643cb59b-0c8b-4bb3-94e5-00f81d8f7a47","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"cb9c959b-f56c-46d6-a246-e7bc374efd24","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5a9aa45c-9090-4fa1-9f88-593b86000d4f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"cd1ef362-a88d-48d5-b956-7213f5ce0460","type":"divider","props":{},"children":[]},{"id":"0036cf41-6281-4020-be2c-aada91b06cc2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"01e72ef0-f891-4045-9310-fa89c79df5d3","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 purple gradient button. It uses a black page background, a dark inner button surface, glowing purple conic-gradient border, and gradient text.","styles":{}}],"children":[]},{"id":"c0569f4d-f15f-4ba4-beb7-0e4b63f40d2c","type":"procode","props":{"code":"body {\n margin: 0;\n background: #000;\n font-family: Arial, Helvetica, sans-serif;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ycl90iwb4\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n background: #000;\\n font-family: Arial, Helvetica, sans-serif;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b49c4e86-4211-46b8-bd70-fcccf8f71579","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":"fc80a90f-5f7c-4ef3-a643-22f089f2f267","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nhc9fwodw\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75370910-5e43-4eed-90ce-1647e2be930c","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":".gradient-button","styles":{"code":true}},{"type":"text","text":" is the main wrapper. It uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" so the glowing layers stay behind the text.","styles":{}}],"children":[]},{"id":"c3b68faf-e7c5-437d-bf66-9969535230ce","type":"procode","props":{"code":".gradient-button {\n position: relative;\n padding: 11px 30px;\n font-size: 18px;\n font-weight: 700;\n background: transparent;\n border: none;\n cursor: pointer;\n border-radius: 999px;\n overflow: hidden;\n isolation: isolate;\n transition: transform 0.2s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"w1m3qh9nv\",\"name\":\"code\",\"code\":\".gradient-button {\\n position: relative;\\n padding: 11px 30px;\\n font-size: 18px;\\n font-weight: 700;\\n background: transparent;\\n border: none;\\n cursor: pointer;\\n border-radius: 999px;\\n overflow: hidden;\\n isolation: isolate;\\n transition: transform 0.2s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f1387a1d-0aa2-4064-8d09-fddf2dcd3fd1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Scale\n","styles":{"bold":true}},{"type":"text","text":"On hover, the button grows slightly.","styles":{}}],"children":[]},{"id":"179f8869-4e49-4b77-8509-f10608c589a6","type":"procode","props":{"code":".gradient-button:hover {\n transform: scale(1.03);\n}","language":"javascript","filename":"","files":"[{\"id\":\"l1xts8ag7\",\"name\":\"code\",\"code\":\".gradient-button:hover {\\n transform: scale(1.03);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fcc74094-3aec-4205-9118-96a8a4204fae","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press\n","styles":{"bold":true}},{"type":"text","text":"On click, the button scales down slightly to create a pressed feel.","styles":{}}],"children":[]},{"id":"5b45239c-1b8c-4e19-9645-f38c2c1815fb","type":"procode","props":{"code":".gradient-button:active {\n transform: scale(0.98);\n}","language":"javascript","filename":"","files":"[{\"id\":\"5aoabforn\",\"name\":\"code\",\"code\":\".gradient-button:active {\\n transform: scale(0.98);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9e7ca99-bd31-441b-a82d-c80f1c099176","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Conic Gradient Glow\n","styles":{"bold":true}},{"type":"text","text":"The animated purple glow is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":". It is larger than the button using ","styles":{}},{"type":"text","text":"inset: -45%","styles":{"code":true}},{"type":"text","text":", then blurred with ","styles":{}},{"type":"text","text":"filter: blur(8px)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9ff9e2fc-344f-48bd-8ec9-2208b30ef991","type":"procode","props":{"code":".gradient-button::before {\n content: \"\";\n position: absolute;\n inset: -45%;\n background: conic-gradient(\n from 0deg,\n #f0abfc,\n #e879f9,\n #a855f7,\n #7c3aed,\n #4f46e5,\n #c084fc,\n #f0abfc\n );\n z-index: -2;\n filter: blur(8px);\n transform: rotate(0deg);\n transition: transform 1.4s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jw6i2685m\",\"name\":\"code\",\"code\":\".gradient-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: -45%;\\n background: conic-gradient(\\n from 0deg,\\n #f0abfc,\\n #e879f9,\\n #a855f7,\\n #7c3aed,\\n #4f46e5,\\n #c084fc,\\n #f0abfc\\n );\\n z-index: -2;\\n filter: blur(8px);\\n transform: rotate(0deg);\\n transition: transform 1.4s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87e02e24-ef16-4bb9-9c5a-99d519e21df5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Gradient Rotation Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the gradient layer rotates ","styles":{}},{"type":"text","text":"180deg","styles":{"code":true}},{"type":"text","text":". This makes the border glow feel alive.","styles":{}}],"children":[]},{"id":"3489053e-8874-4241-a8ac-8f75b7312243","type":"procode","props":{"code":".gradient-button:hover::before {\n transform: rotate(180deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"7iekvh1y9\",\"name\":\"code\",\"code\":\".gradient-button:hover::before {\\n transform: rotate(180deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8409327e-3849-4ed9-bb85-716541568a3a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Inner Dark Surface\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" layer creates the dark center of the button. It sits above the glow but behind the text.","styles":{}}],"children":[]},{"id":"ba5d0951-719d-4d06-b375-c852a37a73f7","type":"procode","props":{"code":".gradient-button::after {\n content: \"\";\n position: absolute;\n inset: 3px;\n background: #050505;\n border-radius: inherit;\n z-index: -1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zop3rvthz\",\"name\":\"code\",\"code\":\".gradient-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 3px;\\n background: #050505;\\n border-radius: inherit;\\n z-index: -1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4539ffab-6fc3-4c94-a36b-c92bd26b28b0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Gradient Text\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".gradient-text","styles":{"code":true}},{"type":"text","text":" uses a linear gradient clipped into the text. The real text color is transparent so only the gradient shows.","styles":{}}],"children":[]},{"id":"08da7596-2826-4b2e-ae88-7bfa227b0bcb","type":"procode","props":{"code":".gradient-text {\n color: transparent;\n background: linear-gradient(90deg, #f5d0fe, #e879f9, #c084fc, #a78bfa);\n background-clip: text;\n -webkit-background-clip: text;\n text-shadow: 0 0 10px rgba(232, 121, 249, 0.45);\n}","language":"javascript","filename":"","files":"[{\"id\":\"dz7oeowgr\",\"name\":\"code\",\"code\":\".gradient-text {\\n color: transparent;\\n background: linear-gradient(90deg, #f5d0fe, #e879f9, #c084fc, #a78bfa);\\n background-clip: text;\\n -webkit-background-clip: text;\\n text-shadow: 0 0 10px rgba(232, 121, 249, 0.45);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f28fa6f-675c-4755-878a-d835f83a16d4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Glow Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the text runs the ","styles":{}},{"type":"text","text":"text-glow","styles":{"code":true}},{"type":"text","text":" animation repeatedly.","styles":{}}],"children":[]},{"id":"ddd52f5d-0d09-448f-8080-cff3813fe0b6","type":"procode","props":{"code":".gradient-button:hover .gradient-text {\n animation: text-glow 1.6s ease-in-out infinite;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1xn4j00hl\",\"name\":\"code\",\"code\":\".gradient-button:hover .gradient-text {\\n animation: text-glow 1.6s ease-in-out infinite;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5ce1a463-79eb-4bc4-8bc3-2bb06b8e3d1d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Glow Animation\n","styles":{"bold":true}},{"type":"text","text":"The text shadow grows brighter in the middle of the animation, then returns to the softer glow.","styles":{}}],"children":[]},{"id":"4bc53d26-20af-4576-b85d-dfd8502df932","type":"procode","props":{"code":"@keyframes text-glow {\n 0% {\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\n }\n\n 50% {\n text-shadow: 0 0 16px rgba(192, 132, 252, 0.75);\n }\n\n 100% {\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"ewec5z81p\",\"name\":\"code\",\"code\":\"@keyframes text-glow {\\n 0% {\\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\\n }\\n\\n 50% {\\n text-shadow: 0 0 16px rgba(192, 132, 252, 0.75);\\n }\\n\\n 100% {\\n text-shadow: 0 0 8px rgba(232, 121, 249, 0.35);\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8c0674dd-51ae-4f16-9c94-272f13c00184","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 button has a rotating conic-gradient glow, a dark inner surface, and glowing gradient text.","styles":{}}],"children":[]},{"id":"d2b3aff4-6fcb-4cc4-b716-5f19e3f26e5b","type":"procode","props":{"code":".gradient-button::before {\n background: conic-gradient(\n from 0deg,\n #f0abfc,\n #e879f9,\n #a855f7,\n #7c3aed,\n #4f46e5,\n #c084fc,\n #f0abfc\n );\n filter: blur(8px);\n}\n\n.gradient-button::after {\n inset: 3px;\n background: #050505;\n}\n\n.gradient-button:hover::before {\n transform: rotate(180deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"fmrk5qvde\",\"name\":\"code\",\"code\":\".gradient-button::before {\\n background: conic-gradient(\\n from 0deg,\\n #f0abfc,\\n #e879f9,\\n #a855f7,\\n #7c3aed,\\n #4f46e5,\\n #c084fc,\\n #f0abfc\\n );\\n filter: blur(8px);\\n}\\n\\n.gradient-button::after {\\n inset: 3px;\\n background: #050505;\\n}\\n\\n.gradient-button:hover::before {\\n transform: rotate(180deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5e24ec4f-7960-4d0c-9f30-613b51c32aa7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The pseudo-elements use negative ","styles":{}},{"type":"text","text":"z-index","styles":{"code":true}},{"type":"text","text":". ","styles":{}},{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" keeps those layers inside the button stacking context, so they stay behind the text without disappearing behind the page.","styles":{}}],"children":[]},{"id":"81b04e09-f45c-410e-81d6-17a8168a1c5c","type":"procode","props":{"code":".gradient-button {\n isolation: isolate;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8epn12cvh\",\"name\":\"code\",\"code\":\".gradient-button {\\n isolation: isolate;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"923e72d2-c621-49fc-8025-bb8a0e503f98","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"inset: -45%","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The gradient layer is larger than the button so the conic-gradient can glow around the pill shape after blur is applied.","styles":{}}],"children":[]},{"id":"f4ed92fd-8b83-4400-9a9b-2b113cd9c0d0","type":"procode","props":{"code":".gradient-button::before {\n inset: -45%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"d6faz85yr\",\"name\":\"code\",\"code\":\".gradient-button::before {\\n inset: -45%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca60e3b2-112a-4f94-9723-2b11e2f4ed7b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"inset: 3px","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The inner surface is slightly smaller than the button. This leaves a visible glowing border around the inside.","styles":{}}],"children":[]},{"id":"147fca2a-c8a6-48d4-bc23-0a7efe785f43","type":"procode","props":{"code":".gradient-button::after {\n inset: 3px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wh7nxdymk\",\"name\":\"code\",\"code\":\".gradient-button::after {\\n inset: 3px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75a04adc-1f48-4b23-b621-38aa8e853852","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, transitions and animations are removed.","styles":{}}],"children":[]},{"id":"0e2b1401-0985-4f89-8530-23db84eaaba4","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .gradient-button,\n .gradient-button::before,\n .gradient-text {\n transition: none;\n animation: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"ytket50ft\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .gradient-button,\\n .gradient-button::before,\\n .gradient-text {\\n transition: none;\\n animation: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c2f8feca-7e81-4d25-b690-35c7a93c915d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the hover scale speed here:","styles":{}}],"children":[]},{"id":"de663f91-e2e7-4597-973c-02ab80bad9ee","type":"procode","props":{"code":".gradient-button {\n transition: transform 0.2s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0lo4cdsp7\",\"name\":\"code\",\"code\":\".gradient-button {\\n transition: transform 0.2s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a72f84ad-79b2-4418-86ec-622a84f32f92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the gradient rotation speed here:","styles":{}}],"children":[]},{"id":"2d843ad5-b3b8-4c11-aea5-0073c9690ba1","type":"procode","props":{"code":".gradient-button::before {\n transition: transform 1.4s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2z3pzzou6\",\"name\":\"code\",\"code\":\".gradient-button::before {\\n transition: transform 1.4s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"897f1c6e-3fbb-43e4-826b-22b343fc82ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text glow speed here:","styles":{}}],"children":[]},{"id":"dbf7b278-9843-4fda-b959-7fe880f1cf7b","type":"procode","props":{"code":".gradient-button:hover .gradient-text {\n animation: text-glow 1.6s ease-in-out infinite;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m3u0kaw2m\",\"name\":\"code\",\"code\":\".gradient-button:hover .gradient-text {\\n animation: text-glow 1.6s ease-in-out infinite;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4b9874a0-01b9-4cc4-9c82-60dcdf98b0b4","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":"468707f0-63bf-4b86-96c7-b1d9d8bc4b2e","type":"procode","props":{"code":"body {\n background: #000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9azybw3m6\",\"name\":\"code\",\"code\":\"body {\\n background: #000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"334e4974-f526-4a7c-aac1-e214c92bc866","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the inner button color here:","styles":{}}],"children":[]},{"id":"0d30adbc-9d94-426c-a2db-656c7a2a43f5","type":"procode","props":{"code":".gradient-button::after {\n background: #050505;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rwt840g73\",\"name\":\"code\",\"code\":\".gradient-button::after {\\n background: #050505;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0bf3354f-2c6f-4604-9123-184cc0f9a5bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the border glow colors here:","styles":{}}],"children":[]},{"id":"0277aecd-cbb5-475b-8811-8784ac8a730c","type":"procode","props":{"code":".gradient-button::before {\n background: conic-gradient(\n from 0deg,\n #f0abfc,\n #e879f9,\n #a855f7,\n #7c3aed,\n #4f46e5,\n #c084fc,\n #f0abfc\n );\n}","language":"javascript","filename":"","files":"[{\"id\":\"t2zs9lz6w\",\"name\":\"code\",\"code\":\".gradient-button::before {\\n background: conic-gradient(\\n from 0deg,\\n #f0abfc,\\n #e879f9,\\n #a855f7,\\n #7c3aed,\\n #4f46e5,\\n #c084fc,\\n #f0abfc\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3ddde155-3948-4f52-aff2-9595a2efe561","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text gradient here:","styles":{}}],"children":[]},{"id":"9b4c2ede-ec98-4493-8a2f-50ae4b40fc84","type":"procode","props":{"code":".gradient-text {\n background: linear-gradient(90deg, #f5d0fe, #e879f9, #c084fc, #a78bfa);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rzyctge4p\",\"name\":\"code\",\"code\":\".gradient-text {\\n background: linear-gradient(90deg, #f5d0fe, #e879f9, #c084fc, #a78bfa);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"36e4a57d-80a1-4081-b1ec-893d5f596d1b","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":"9fe10d54-5fbe-4b97-83ef-825febac1b44","type":"procode","props":{"code":".gradient-button {\n padding: 11px 30px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"p3jabyt9t\",\"name\":\"code\",\"code\":\".gradient-button {\\n padding: 11px 30px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6b103b14-1881-4fa6-9648-aadbc99fe76a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button roundness here:","styles":{}}],"children":[]},{"id":"a51d2b14-1d6e-4907-b91b-df21f1b26493","type":"procode","props":{"code":".gradient-button {\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"h4lrqg2av\",\"name\":\"code\",\"code\":\".gradient-button {\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"548a3500-75fa-4862-a4f4-26250e93b76d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"2d6c3d7c-5ee2-4eb2-8291-781ba871f0b3","type":"procode","props":{"code":".gradient-button {\n font-size: 18px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"84ryolk6x\",\"name\":\"code\",\"code\":\".gradient-button {\\n font-size: 18px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07e90d3d-3ce2-4508-b736-ad632218941b","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":"badff9c4-7da1-4a90-acff-32d49ec2b479","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"3afb6w1wg\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e3eb8654-5a01-4124-b1d2-cfa62a768308","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]