Smooth Rounded Glow Button

[{"id":"4f238d2f-05a0-41a8-b5c9-0ebd7481e566","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5aafbe1c-cc08-4ed1-b152-7dd9dbfc2897","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"@property --glow-angle {\\n syntax: \\\"\\\";\\n inherits: false;\\n initial-value: 0deg;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n background: #09090b;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.glow-pill-btn {\\n --glow-angle: 0deg;\\n\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n height: 38px;\\n padding: 0 22px;\\n\\n border: 1.5px solid transparent;\\n border-radius: 999px;\\n\\n background:\\n linear-gradient(#000000, #000000) padding-box,\\n conic-gradient(\\n from var(--glow-angle),\\n rgba(59, 130, 246, 0.15),\\n #3b82f6,\\n #ffffff,\\n #3b82f6,\\n rgba(59, 130, 246, 0.15),\\n rgba(59, 130, 246, 0.15)\\n )\\n border-box;\\n\\n color: #ffffff;\\n font-size: 14px;\\n font-weight: 500;\\n\\n cursor: pointer;\\n\\n animation: rotate-glow 3s linear infinite;\\n\\n transition:\\n transform 180ms ease,\\n box-shadow 250ms ease;\\n}\\n\\n.glow-pill-btn:hover {\\n box-shadow:\\n 0 0 18px rgba(59, 130, 246, 0.35),\\n 0 0 32px rgba(59, 130, 246, 0.18);\\n}\\n\\n.glow-pill-btn:active {\\n transform: scale(0.97);\\n}\\n\\n.glow-pill-btn:focus-visible {\\n outline: 2px solid #3b82f6;\\n outline-offset: 4px;\\n}\\n\\n@keyframes rotate-glow {\\n to {\\n --glow-angle: 360deg;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Smooth Rounded Glow Button\\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","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"cad69e4c-d0d7-4f14-b1d0-a45c844648fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a810baed-5a3d-43b3-9c4a-02bf0813232f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"a8b117b2-e622-4a49-80fe-c2d682173e07","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\" \",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2a0317e-edd0-4b7c-acce-8b2499b70015","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"66305817-ed5e-4369-9739-24405d223306","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"@property --glow-angle {\\n syntax: \\\"\\\";\\n inherits: false;\\n initial-value: 0deg;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n background: #09090b;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.glow-pill-btn {\\n --glow-angle: 0deg;\\n\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n height: 38px;\\n padding: 0 22px;\\n\\n border: 1.5px solid transparent;\\n border-radius: 999px;\\n\\n background:\\n linear-gradient(#000000, #000000) padding-box,\\n conic-gradient(\\n from var(--glow-angle),\\n rgba(59, 130, 246, 0.15),\\n #3b82f6,\\n #ffffff,\\n #3b82f6,\\n rgba(59, 130, 246, 0.15),\\n rgba(59, 130, 246, 0.15)\\n )\\n border-box;\\n\\n color: #ffffff;\\n font-size: 14px;\\n font-weight: 500;\\n\\n cursor: pointer;\\n\\n animation: rotate-glow 3s linear infinite;\\n\\n transition:\\n transform 180ms ease,\\n box-shadow 250ms ease;\\n}\\n\\n.glow-pill-btn:hover {\\n box-shadow:\\n 0 0 18px rgba(59, 130, 246, 0.35),\\n 0 0 32px rgba(59, 130, 246, 0.18);\\n}\\n\\n.glow-pill-btn:active {\\n transform: scale(0.97);\\n}\\n\\n.glow-pill-btn:focus-visible {\\n outline: 2px solid #3b82f6;\\n outline-offset: 4px;\\n}\\n\\n@keyframes rotate-glow {\\n to {\\n --glow-angle: 360deg;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f972cb9c-0188-482c-b155-27b1db3c9fde","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b206f3af-5cc2-49f7-9782-d01ae154b056","type":"divider","props":{},"children":[]},{"id":"9135c758-64a2-47d8-b8ab-063913e8df1a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"d44e84d1-1a69-413f-b6de-e249a41f8b35","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The button uses a black pill shape, white text, and a thin animated gradient border.","styles":{}}],"children":[]},{"id":"13de6d44-3e91-46ac-82f0-3c66aa369466","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Rounded Shape\n","styles":{"bold":true}},{"type":"text","text":"The pill shape is created with:","styles":{}}],"children":[]},{"id":"6556bbb0-6307-4429-ae47-0625acfdc4b1","type":"procode","props":{"code":"border-radius: 999px;","language":"javascript","filename":"","files":"[{\"id\":\"qjrgx44tp\",\"name\":\"code\",\"code\":\"border-radius: 999px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ceba4ff5-9ddc-4a1f-a948-8a2a1849698c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Glow Border\n","styles":{"bold":true}},{"type":"text","text":"The border uses two background layers. The first layer keeps the inside black, and the second layer creates the animated border.","styles":{}}],"children":[]},{"id":"630b2ded-2267-4f68-8b57-be4f907852eb","type":"procode","props":{"code":"background:\n linear-gradient(#000000, #000000) padding-box,\n conic-gradient(\n from var(--glow-angle),\n rgba(59, 130, 246, 0.15),\n #3b82f6,\n #ffffff,\n #3b82f6,\n rgba(59, 130, 246, 0.15)\n ) border-box;","language":"javascript","filename":"","files":"[{\"id\":\"oh24zf7aw\",\"name\":\"code\",\"code\":\"background:\\n linear-gradient(#000000, #000000) padding-box,\\n conic-gradient(\\n from var(--glow-angle),\\n rgba(59, 130, 246, 0.15),\\n #3b82f6,\\n #ffffff,\\n #3b82f6,\\n rgba(59, 130, 246, 0.15)\\n ) border-box;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13959ec3-37ff-41be-8782-6096f6787438","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The glow rotates by animating the custom CSS variable ","styles":{}},{"type":"text","text":"--glow-angle","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"54091a71-64f0-45a5-a932-f70497908587","type":"procode","props":{"code":"@keyframes rotate-glow {\n to {\n --glow-angle: 360deg;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"2e5x8ilzg\",\"name\":\"code\",\"code\":\"@keyframes rotate-glow {\\n to {\\n --glow-angle: 360deg;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"80786b5a-3923-47b3-98b6-a5f2ede391c0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change this value to control the animation speed:","styles":{}}],"children":[]},{"id":"3b07419d-9483-4eb9-bdd8-f56509647f88","type":"procode","props":{"code":"animation: rotate-glow 3s linear infinite;","language":"javascript","filename":"","files":"[{\"id\":\"oazwhvm4a\",\"name\":\"code\",\"code\":\"animation: rotate-glow 3s linear infinite;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"83bfd433-8e10-4750-9976-4bc44e68bd79","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lower ","styles":{}},{"type":"text","text":"3s","styles":{"code":true}},{"type":"text","text":" to make it faster. Increase it to make it slower.","styles":{}}],"children":[]},{"id":"2488810e-3790-42bb-8dc9-7672a90beefe","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the button adds a soft blue glow around the border.","styles":{}}],"children":[]},{"id":"812c5a22-010e-4c57-81dd-ecd57ad4835d","type":"procode","props":{"code":".glow-pill-btn:hover {\n box-shadow:\n 0 0 18px rgba(59, 130, 246, 0.35),\n 0 0 32px rgba(59, 130, 246, 0.18);\n}","language":"javascript","filename":"","files":"[{\"id\":\"p69fw4w2v\",\"name\":\"code\",\"code\":\".glow-pill-btn:hover {\\n box-shadow:\\n 0 0 18px rgba(59, 130, 246, 0.35),\\n 0 0 32px rgba(59, 130, 246, 0.18);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dde63dbc-bbf5-4b24-adb6-01670b65a1d7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the glow color here:","styles":{}}],"children":[]},{"id":"1fa99a3c-126b-4cbe-808f-6fbf85fe104b","type":"procode","props":{"code":"#3b82f6","language":"javascript","filename":"","files":"[{\"id\":\"yep44qnm1\",\"name\":\"code\",\"code\":\"#3b82f6\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0916f611-3656-465b-adc8-93c94fdf9984","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6bb430a1-90c1-45e4-823c-e2157d9e0abd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]