Gradient Pill border Button

[{"id":"927df995-2779-458a-a15c-1a839d59b514","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"65e343b7-8faf-443d-9deb-b63f5e103cb3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.gradient-pill-button {\\n width: 180px;\\n height: 54px;\\n padding: 0;\\n border: none;\\n border-radius: 999px;\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n isolation: isolate;\\n\\n background: #1a1a1a;\\n transform: translateZ(0) scale(1);\\n box-shadow: 0 0 0 0 rgba(0, 255, 117, 0);\\n\\n transition:\\n transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);\\n\\n will-change: transform, box-shadow;\\n}\\n\\n.gradient-pill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n border-radius: inherit;\\n\\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\\n\\n transform: translateZ(0) scale(0.12);\\n transform-origin: center;\\n z-index: 0;\\n\\n transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);\\n\\n will-change: transform;\\n}\\n\\n.gradient-pill-inner {\\n position: relative;\\n z-index: 1;\\n\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n background: #1a1a1a;\\n border-radius: inherit;\\n\\n color: #fff;\\n font-size: 15px;\\n font-weight: 800;\\n letter-spacing: 2px;\\n\\n transform: translateZ(0) scale(1);\\n transform-origin: center;\\n\\n transition:\\n transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),\\n letter-spacing 0.45s cubic-bezier(0.22, 1, 0.36, 1);\\n\\n will-change: transform;\\n}\\n\\n.gradient-pill-button:hover {\\n box-shadow: 0 0 30px 1px rgba(0, 255, 117, 0.3);\\n\\n transition:\\n transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;\\n}\\n\\n.gradient-pill-button:hover::before {\\n transform: translateZ(0) scale(1);\\n}\\n\\n.gradient-pill-button:hover .gradient-pill-inner {\\n transform: translateZ(0) scale(0.955);\\n}\\n\\n.gradient-pill-button:active {\\n transform: translateZ(0) scale(0.975);\\n}\\n\\n.gradient-pill-button:active .gradient-pill-inner {\\n transform: translateZ(0) scale(0.94);\\n letter-spacing: 1px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .gradient-pill-button,\\n .gradient-pill-button::before,\\n .gradient-pill-inner {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Gradient Pill border 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":"f50a4429-0f5e-4daa-9b4a-9825b3fee927","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"103b93d5-5f92-4b33-8ff2-88a17e472fae","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"17808e96-6d43-4206-8300-a27cf50cb908","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7274299d-f256-4aaa-87a2-c1f1f81480ae","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"9a6a75a0-bf59-4a01-8084-3f4323ad2d60","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.gradient-pill-button {\\n width: 180px;\\n height: 54px;\\n padding: 0;\\n border: none;\\n border-radius: 999px;\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n isolation: isolate;\\n\\n background: #1a1a1a;\\n transform: translateZ(0) scale(1);\\n box-shadow: 0 0 0 0 rgba(0, 255, 117, 0);\\n\\n transition:\\n transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);\\n\\n will-change: transform, box-shadow;\\n}\\n\\n.gradient-pill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n border-radius: inherit;\\n\\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\\n\\n transform: translateZ(0) scale(0.12);\\n transform-origin: center;\\n z-index: 0;\\n\\n transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);\\n\\n will-change: transform;\\n}\\n\\n.gradient-pill-inner {\\n position: relative;\\n z-index: 1;\\n\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n background: #1a1a1a;\\n border-radius: inherit;\\n\\n color: #fff;\\n font-size: 15px;\\n font-weight: 800;\\n letter-spacing: 2px;\\n\\n transform: translateZ(0) scale(1);\\n transform-origin: center;\\n\\n transition:\\n transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),\\n letter-spacing 0.45s cubic-bezier(0.22, 1, 0.36, 1);\\n\\n will-change: transform;\\n}\\n\\n.gradient-pill-button:hover {\\n box-shadow: 0 0 30px 1px rgba(0, 255, 117, 0.3);\\n\\n transition:\\n transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;\\n}\\n\\n.gradient-pill-button:hover::before {\\n transform: translateZ(0) scale(1);\\n}\\n\\n.gradient-pill-button:hover .gradient-pill-inner {\\n transform: translateZ(0) scale(0.955);\\n}\\n\\n.gradient-pill-button:active {\\n transform: translateZ(0) scale(0.975);\\n}\\n\\n.gradient-pill-button:active .gradient-pill-inner {\\n transform: translateZ(0) scale(0.94);\\n letter-spacing: 1px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .gradient-pill-button,\\n .gradient-pill-button::before,\\n .gradient-pill-inner {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bcab5b06-7920-4d5d-89e4-0a5568bc8b0d","type":"divider","props":{},"children":[]},{"id":"3a2725ad-3363-4e6c-b11d-24b1d19fb04e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"5ad4ac7c-5e07-40ba-b171-f5116ae7953e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The component uses an outer button and an inner span.","styles":{}}],"children":[]},{"id":"33f08cc3-c799-4c72-a7b4-311208a2cc6b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"7hqnphu62\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7169e8ae-b25d-4cd5-8d17-ad8218a83e5d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The outer button is the main animated container.\n\nThe inner span is the dark surface that shrinks on hover.","styles":{}}],"children":[]},{"id":"76340d59-7cbf-422d-9255-7130ebb5bbc0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe page is centered using flex on the body.","styles":{}}],"children":[]},{"id":"8ba2c955-0429-4f80-8749-d9f506e9041d","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #111;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m9tb3gp3i\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da9d905e-78af-4824-b2b4-f53e9ecaacf9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This keeps the button in the middle of the preview.","styles":{}}],"children":[]},{"id":"0ade03bf-8308-42e1-986f-6ee38f427055","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Outer Button\n\nThe outer button controls the pill size, border radius, clipping, shadow, and active press animation.","styles":{}}],"children":[]},{"id":"77202b9d-6602-4e58-b64f-685d3f4f738d","type":"procode","props":{"code":".gradient-pill-button {\n width: 180px;\n height: 54px;\n border-radius: 999px;\n position: relative;\n overflow: hidden;\n isolation: isolate;\n background: #1a1a1a;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7ez447tdv\",\"name\":\"code\",\"code\":\".gradient-pill-button {\\n width: 180px;\\n height: 54px;\\n border-radius: 999px;\\n position: relative;\\n overflow: hidden;\\n isolation: isolate;\\n background: #1a1a1a;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c84cb60-bdfd-40d0-8284-acac862d9929","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" makes the gradient stay inside the pill shape.\n\n","styles":{}},{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" keeps the gradient layer behind the inner content cleanly.","styles":{}}],"children":[]},{"id":"75f10fad-f494-4a6d-9881-2dbbe0cb130a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Gradient Border Layer\n\nThe gradient is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"de1b7a56-435c-43b0-9b18-3dce5099a944","type":"procode","props":{"code":".gradient-pill-button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n transform: translateZ(0) scale(0.12);\n z-index: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qhz5mguxf\",\"name\":\"code\",\"code\":\".gradient-pill-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n border-radius: inherit;\\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\\n transform: translateZ(0) scale(0.12);\\n z-index: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d21fdf4a-1041-46c9-a291-6f2e943d625c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The gradient starts small with ","styles":{}},{"type":"text","text":"scale(0.12)","styles":{"code":true}},{"type":"text","text":", so the hover animation feels smoother than starting from ","styles":{}},{"type":"text","text":"scale(0)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"866c0ad6-379a-4916-b59b-c1e38a7d267e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, it expands to full size.","styles":{}}],"children":[]},{"id":"f1885b63-b2b3-4a2c-a3bf-1e9b198d0917","type":"procode","props":{"code":".gradient-pill-button:hover::before {\n transform: translateZ(0) scale(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"565rrjp4m\",\"name\":\"code\",\"code\":\".gradient-pill-button:hover::before {\\n transform: translateZ(0) scale(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b398d8f3-220e-47fa-8172-2a9c60913341","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Inner First Animation\n\nThe inner layer animates first by scaling down.","styles":{}}],"children":[]},{"id":"67d9d65d-e3ee-487b-bc5b-b7bb3e835854","type":"procode","props":{"code":".gradient-pill-button:hover .gradient-pill-inner {\n transform: translateZ(0) scale(0.955);\n}","language":"javascript","filename":"","files":"[{\"id\":\"indih8154\",\"name\":\"code\",\"code\":\".gradient-pill-button:hover .gradient-pill-inner {\\n transform: translateZ(0) scale(0.955);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"597c3dad-9e4d-457e-8406-35ad2af8379c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This reveals the gradient border around the button before the glow shadow appears.","styles":{}}],"children":[]},{"id":"cdb5623d-1f37-446a-91d1-4395dc43b6bb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Inner Surface\n\nThe inner span fills the button and stays above the gradient.","styles":{}}],"children":[]},{"id":"2d25c000-9893-4741-a23f-fe783bf44d22","type":"procode","props":{"code":".gradient-pill-inner {\n position: relative;\n z-index: 1;\n width: 100%;\n height: 100%;\n background: #1a1a1a;\n border-radius: inherit;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jkr3m32h4\",\"name\":\"code\",\"code\":\".gradient-pill-inner {\\n position: relative;\\n z-index: 1;\\n width: 100%;\\n height: 100%;\\n background: #1a1a1a;\\n border-radius: inherit;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f2a4383-18a2-4c4a-b8e3-457c6f332cc3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Because the inner surface has the same background color as the button, the center stays dark and only the gradient edge becomes visible.","styles":{}}],"children":[]},{"id":"bc32a4f4-59aa-4dab-9cba-c99a8f8aa844","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shadow After Inner\n\nThe shadow appears after a small delay.","styles":{}}],"children":[]},{"id":"af0fdd93-bb3e-4188-929e-7765bc710bb3","type":"procode","props":{"code":".gradient-pill-button:hover {\n box-shadow: 0 0 30px 1px rgba(0, 255, 117, 0.3);\n\n transition:\n transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"5cpuiok7k\",\"name\":\"code\",\"code\":\".gradient-pill-button:hover {\\n box-shadow: 0 0 30px 1px rgba(0, 255, 117, 0.3);\\n\\n transition:\\n transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"99ed6fd1-df74-4cce-a372-298d021ebda6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"0.22s","styles":{"code":true}},{"type":"text","text":" delay makes the order feel like this:","styles":{}}],"children":[]},{"id":"33b54211-1e09-4247-99f6-880da153aa59","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Inner shrinks first.\n\nGradient border appears.\n\nGlow shadow comes after.","styles":{}}],"children":[]},{"id":"977a7238-d69e-4808-88a8-8cb6df9c6ef3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press\n\nWhen clicked, the whole button scales down slightly.","styles":{}}],"children":[]},{"id":"174423da-49a2-41e3-95ef-f2c32f810569","type":"procode","props":{"code":".gradient-pill-button:active {\n transform: translateZ(0) scale(0.975);\n}","language":"javascript","filename":"","files":"[{\"id\":\"27ru2uf3y\",\"name\":\"code\",\"code\":\".gradient-pill-button:active {\\n transform: translateZ(0) scale(0.975);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86116947-8ae7-4c9b-9078-3475b4aeffc5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The inner surface also scales down more and tightens the letter spacing.","styles":{}}],"children":[]},{"id":"0bb8b72b-0173-42ca-bea3-5c4cdf5fee40","type":"procode","props":{"code":".gradient-pill-button:active .gradient-pill-inner {\n transform: translateZ(0) scale(0.94);\n letter-spacing: 1px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"skmlzogwf\",\"name\":\"code\",\"code\":\".gradient-pill-button:active .gradient-pill-inner {\\n transform: translateZ(0) scale(0.94);\\n letter-spacing: 1px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9593d2ee-62a8-4c7e-8ca7-8f343c327a55","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Motion\n\nThe animation uses this easing:","styles":{}}],"children":[]},{"id":"35062248-88a7-4a2f-a59d-385e79f11a3b","type":"procode","props":{"code":"cubic-bezier(0.22, 1, 0.36, 1)","language":"javascript","filename":"","files":"[{\"id\":\"zgfwcbpmu\",\"name\":\"code\",\"code\":\"cubic-bezier(0.22, 1, 0.36, 1)\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7f7a328f-fba7-4ab8-a885-915cb3a60aa3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the hover feel smooth, soft, and professional.","styles":{}}],"children":[]},{"id":"d999c8de-45e0-4ff9-8c39-b0e60a7ca299","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n\nThe media query removes transitions for users who prefer less animation.","styles":{}}],"children":[]},{"id":"dca26fb8-469c-4f87-9c72-7184cbc2cb7f","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .gradient-pill-button,\n .gradient-pill-button::before,\n .gradient-pill-inner {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"wjklqge8m\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .gradient-pill-button,\\n .gradient-pill-button::before,\\n .gradient-pill-inner {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4406638-55fa-4268-9db4-d7f91eaeed9d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]