Skew Fill Split Button

[{"id":"b9e63c39-b837-4da6-992b-f73a4ca4122e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"49fd365c-e530-4250-8f41-9d3ac95d13dd","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.skew-pill-button {\\n display: inline-block;\\n width: 150px;\\n height: 50px;\\n border-radius: 999px;\\n border: 1px solid #03045e;\\n position: relative;\\n overflow: hidden;\\n background: #ffffff;\\n cursor: pointer;\\n transition:\\n transform 0.3s ease,\\n border-color 0.3s ease;\\n z-index: 1;\\n}\\n\\n.skew-pill-button::before,\\n.skew-pill-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 0;\\n width: 0;\\n height: 100%;\\n transform: skew(15deg);\\n transition: width 0.5s ease;\\n overflow: hidden;\\n z-index: -1;\\n}\\n\\n.skew-pill-button::before {\\n left: -12px;\\n background: #5a189a;\\n}\\n\\n.skew-pill-button::after {\\n right: -12px;\\n background: #5a189a;\\n}\\n\\n.skew-pill-button:hover::before,\\n.skew-pill-button:hover::after {\\n width: 60%;\\n}\\n\\n.skew-pill-button span {\\n color: #03045e;\\n font-size: 18px;\\n font-weight: 600;\\n transition: color 0.3s ease;\\n}\\n\\n.skew-pill-button:hover span {\\n color: #fff;\\n}\\n\\n.skew-pill-button:active {\\n transform: scale(0.96);\\n}\\n\\n.skew-pill-button:focus-visible {\\n outline: 3px solid rgba(90, 24, 154, 0.3);\\n outline-offset: 5px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .skew-pill-button,\\n .skew-pill-button::before,\\n .skew-pill-button::after,\\n .skew-pill-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Skew Fill Split 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":"be39450a-40da-4c43-a500-a6bfe02240f9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"4e286049-0998-469b-ab5e-c1467676c3b9","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6c4db75e-19fe-4521-bf8b-7e355172782a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"66975f72-14da-4ad0-9ba7-5215177d3df3","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.skew-pill-button {\\n display: inline-block;\\n width: 150px;\\n height: 50px;\\n border-radius: 999px;\\n border: 1px solid #03045e;\\n position: relative;\\n overflow: hidden;\\n background: #ffffff;\\n cursor: pointer;\\n transition:\\n transform 0.3s ease,\\n border-color 0.3s ease;\\n z-index: 1;\\n}\\n\\n.skew-pill-button::before,\\n.skew-pill-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 0;\\n width: 0;\\n height: 100%;\\n transform: skew(15deg);\\n transition: width 0.5s ease;\\n overflow: hidden;\\n z-index: -1;\\n}\\n\\n.skew-pill-button::before {\\n left: -12px;\\n background: #5a189a;\\n}\\n\\n.skew-pill-button::after {\\n right: -12px;\\n background: #5a189a;\\n}\\n\\n.skew-pill-button:hover::before,\\n.skew-pill-button:hover::after {\\n width: 60%;\\n}\\n\\n.skew-pill-button span {\\n color: #03045e;\\n font-size: 18px;\\n font-weight: 600;\\n transition: color 0.3s ease;\\n}\\n\\n.skew-pill-button:hover span {\\n color: #fff;\\n}\\n\\n.skew-pill-button:active {\\n transform: scale(0.96);\\n}\\n\\n.skew-pill-button:focus-visible {\\n outline: 3px solid rgba(90, 24, 154, 0.3);\\n outline-offset: 5px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .skew-pill-button,\\n .skew-pill-button::before,\\n .skew-pill-button::after,\\n .skew-pill-button span {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b515598f-528c-4c72-96bb-332e554d9d48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b97c796e-2866-467a-af68-9b738eeaf023","type":"divider","props":{},"children":[]},{"id":"949b9a7c-5ea6-4381-a1ae-bff0df31ef50","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"5c280203-f847-444b-9b2e-54a77e5f3e63","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 skew fill pill button. It starts as a white pill with dark blue text and border, then purple skew panels fill from both sides on hover.","styles":{}}],"children":[]},{"id":"b9cfaa32-f018-4055-972f-6f7fa2921a5c","type":"procode","props":{"code":".skew-pill-button {\n background: #ffffff;\n border: 1px solid #03045e;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"z7ve1er58\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n background: #ffffff;\\n border: 1px solid #03045e;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"174c49ef-c5ea-4025-8eb1-c7d9e2d61063","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":"4338a16d-d68f-4265-bf30-7bc51b263741","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"pb4ltfiz9\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f0c6930f-e681-44aa-811e-17c5d1a0d0f6","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":".skew-pill-button","styles":{"code":true}},{"type":"text","text":" has a fixed size, pill radius, hidden overflow, and relative positioning so the fill layers can sit inside it.","styles":{}}],"children":[]},{"id":"45063c2c-dd0a-4c0e-b5d8-69a4d1c4757f","type":"procode","props":{"code":".skew-pill-button {\n display: inline-block;\n width: 150px;\n height: 50px;\n border-radius: 999px;\n border: 1px solid #03045e;\n position: relative;\n overflow: hidden;\n background: #ffffff;\n cursor: pointer;\n z-index: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"go3aiwm7v\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n display: inline-block;\\n width: 150px;\\n height: 50px;\\n border-radius: 999px;\\n border: 1px solid #03045e;\\n position: relative;\\n overflow: hidden;\\n background: #ffffff;\\n cursor: pointer;\\n z-index: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9426721e-28cb-4f03-a180-d455499ad15e","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 purple hover fills are created 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 needs ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"57d31621-4b93-4bf6-951f-83dd67be8bb4","type":"procode","props":{"code":".skew-pill-button {\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7kbvhchm3\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"31b704ff-0934-48fe-8416-46ca02d29d5a","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 fill layers are skewed and placed slightly outside the button. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps them clipped inside the rounded pill shape.","styles":{}}],"children":[]},{"id":"c9a1b62f-d70c-4f30-9dff-e377b1cb5442","type":"procode","props":{"code":".skew-pill-button {\n overflow: hidden;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"75e334m52\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n overflow: hidden;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"089236f7-753a-49a9-af50-e20068dc984c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Layer Setup\n","styles":{"bold":true}},{"type":"text","text":"Both ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" start with ","styles":{}},{"type":"text","text":"width: 0","styles":{"code":true}},{"type":"text","text":", so the purple fill is hidden before hover.","styles":{}}],"children":[]},{"id":"5a0b3eed-6629-4141-987c-6f740167cc9f","type":"procode","props":{"code":".skew-pill-button::before,\n.skew-pill-button::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 0;\n height: 100%;\n transform: skew(15deg);\n transition: width 0.5s ease;\n overflow: hidden;\n z-index: -1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"47eeqwrjv\",\"name\":\"code\",\"code\":\".skew-pill-button::before,\\n.skew-pill-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 0;\\n width: 0;\\n height: 100%;\\n transform: skew(15deg);\\n transition: width 0.5s ease;\\n overflow: hidden;\\n z-index: -1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9a370a3-93c7-410c-a86f-143876d12ec3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Left Purple Fill\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" layer starts from the left side. It is shifted slightly left with ","styles":{}},{"type":"text","text":"left: -12px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b00210d6-f4b9-444d-86c6-7a2c0217e74e","type":"procode","props":{"code":".skew-pill-button::before {\n left: -12px;\n background: #5a189a;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2omh6uau3\",\"name\":\"code\",\"code\":\".skew-pill-button::before {\\n left: -12px;\\n background: #5a189a;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7b17432-11c5-4daa-a672-4d67c09a8380","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Right Purple Fill\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" layer starts from the right side. It is shifted slightly right with ","styles":{}},{"type":"text","text":"right: -12px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"632ee127-912a-4c91-823c-75b676f32b2c","type":"procode","props":{"code":".skew-pill-button::after {\n right: -12px;\n background: #5a189a;\n}","language":"javascript","filename":"","files":"[{\"id\":\"n2hqq4pve\",\"name\":\"code\",\"code\":\".skew-pill-button::after {\\n right: -12px;\\n background: #5a189a;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01afdaee-9795-4d43-b6ea-a61672258dc2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Animation\n","styles":{"bold":true}},{"type":"text","text":"On hover, both skew layers expand to ","styles":{}},{"type":"text","text":"60%","styles":{"code":true}},{"type":"text","text":". Because they come from opposite sides, the button fills from left and right at the same time.","styles":{}}],"children":[]},{"id":"ecc0af06-b0e0-4000-bb60-240a9c742eb8","type":"procode","props":{"code":".skew-pill-button:hover::before,\n.skew-pill-button:hover::after {\n width: 60%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"e49nyfowf\",\"name\":\"code\",\"code\":\".skew-pill-button:hover::before,\\n.skew-pill-button:hover::after {\\n width: 60%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec8d539c-7a9f-43ab-a8ac-5c8206385297","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Base State\n","styles":{"bold":true}},{"type":"text","text":"The button text starts dark blue and uses bold ","styles":{}},{"type":"text","text":"18px","styles":{"code":true}},{"type":"text","text":" typography.","styles":{}}],"children":[]},{"id":"8b56eac5-a344-4f49-8e03-3d24739f2379","type":"procode","props":{"code":".skew-pill-button span {\n color: #03045e;\n font-size: 18px;\n font-weight: 600;\n transition: color 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mt9sfms3i\",\"name\":\"code\",\"code\":\".skew-pill-button span {\\n color: #03045e;\\n font-size: 18px;\\n font-weight: 600;\\n transition: color 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4736034-c41a-4430-b752-65362c1894cd","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the text changes to white so it stays readable on the purple background.","styles":{}}],"children":[]},{"id":"f9f1caa2-a753-436c-8955-d7572d75a4ba","type":"procode","props":{"code":".skew-pill-button:hover span {\n color: #fff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"f6k57vh65\",\"name\":\"code\",\"code\":\".skew-pill-button:hover span {\\n color: #fff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"06a98e6e-3f8f-447a-81c7-f165ed616316","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Pressed State\n","styles":{"bold":true}},{"type":"text","text":"When clicked, the button scales down slightly for a pressed feel.","styles":{}}],"children":[]},{"id":"7464bae2-1f35-40ab-95a5-16b6091df664","type":"procode","props":{"code":".skew-pill-button:active {\n transform: scale(0.96);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ud3e7rc0n\",\"name\":\"code\",\"code\":\".skew-pill-button:active {\\n transform: scale(0.96);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4fbbc9b8-4a9b-47aa-99aa-1c1a3fe0ef41","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Visible\n","styles":{"bold":true}},{"type":"text","text":"When focused using keyboard navigation, the button shows a soft purple outline.","styles":{}}],"children":[]},{"id":"cef7b631-b902-49d1-beb5-b89ce837cca7","type":"procode","props":{"code":".skew-pill-button:focus-visible {\n outline: 3px solid rgba(90, 24, 154, 0.3);\n outline-offset: 5px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"c5kwtga41\",\"name\":\"code\",\"code\":\".skew-pill-button:focus-visible {\\n outline: 3px solid rgba(90, 24, 154, 0.3);\\n outline-offset: 5px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"055fdc64-3269-444a-98f9-bf4152bea825","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button movement and border color use ","styles":{}},{"type":"text","text":"0.3s ease","styles":{"code":true}},{"type":"text","text":". The purple skew fill uses ","styles":{}},{"type":"text","text":"0.5s ease","styles":{"code":true}},{"type":"text","text":", so the fill feels slightly slower and smoother.","styles":{}}],"children":[]},{"id":"1f234f78-d69e-44af-98da-8a3b5fb49352","type":"procode","props":{"code":".skew-pill-button {\n transition:\n transform 0.3s ease,\n border-color 0.3s ease;\n}\n\n.skew-pill-button::before,\n.skew-pill-button::after {\n transition: width 0.5s ease;\n}\n\n.skew-pill-button span {\n transition: color 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ng9rlowdq\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n transition:\\n transform 0.3s ease,\\n border-color 0.3s ease;\\n}\\n\\n.skew-pill-button::before,\\n.skew-pill-button::after {\\n transition: width 0.5s ease;\\n}\\n\\n.skew-pill-button span {\\n transition: color 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"627df6fe-f111-45be-b8eb-f7b215af8e65","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 interaction flow. Two purple skew layers expand from the left and right, while the text changes to white.","styles":{}}],"children":[]},{"id":"13ce1520-3004-4c5b-ba0c-141221813312","type":"procode","props":{"code":".skew-pill-button::before {\n left: -12px;\n background: #5a189a;\n}\n\n.skew-pill-button::after {\n right: -12px;\n background: #5a189a;\n}\n\n.skew-pill-button:hover::before,\n.skew-pill-button:hover::after {\n width: 60%;\n}\n\n.skew-pill-button:hover span {\n color: #fff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"r49vm1vs3\",\"name\":\"code\",\"code\":\".skew-pill-button::before {\\n left: -12px;\\n background: #5a189a;\\n}\\n\\n.skew-pill-button::after {\\n right: -12px;\\n background: #5a189a;\\n}\\n\\n.skew-pill-button:hover::before,\\n.skew-pill-button:hover::after {\\n width: 60%;\\n}\\n\\n.skew-pill-button:hover span {\\n color: #fff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"038c9e41-d66a-4b28-8efe-1a914199d2d2","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 fill, and ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" handles the right fill. This creates a split-fill animation instead of one single direction fill.","styles":{}}],"children":[]},{"id":"cec05c47-128a-4bc3-a5c9-23f23c459783","type":"procode","props":{"code":".skew-pill-button::before {\n left: -12px;\n}\n\n.skew-pill-button::after {\n right: -12px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uctqxwbjx\",\"name\":\"code\",\"code\":\".skew-pill-button::before {\\n left: -12px;\\n}\\n\\n.skew-pill-button::after {\\n right: -12px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56bfac57-34c1-4ee5-bab9-fda06d426e3a","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":" Works\n","styles":{"bold":true}},{"type":"text","text":"The purple fill layers sit behind the text but still inside the button. The button uses ","styles":{}},{"type":"text","text":"z-index: 1","styles":{"code":true}},{"type":"text","text":", and the pseudo-elements use ","styles":{}},{"type":"text","text":"z-index: -1","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f5a48084-b334-49b1-854c-8ceb1720e462","type":"procode","props":{"code":".skew-pill-button {\n z-index: 1;\n}\n\n.skew-pill-button::before,\n.skew-pill-button::after {\n z-index: -1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0gmjynb4o\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n z-index: 1;\\n}\\n\\n.skew-pill-button::before,\\n.skew-pill-button::after {\\n z-index: -1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eea881a4-2b95-4dab-9d83-95ad8004d49a","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 disabled.","styles":{}}],"children":[]},{"id":"2887804e-2ab5-4743-881c-42271acad79d","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .skew-pill-button,\n .skew-pill-button::before,\n .skew-pill-button::after,\n .skew-pill-button span {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"tfzcumidx\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .skew-pill-button,\\n .skew-pill-button::before,\\n .skew-pill-button::after,\\n .skew-pill-button span {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d483b9cb-38de-4242-aea7-cc7e2f211c50","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the purple fill speed here:","styles":{}}],"children":[]},{"id":"db7b20bd-2c68-45d8-bfa5-10089980a48b","type":"procode","props":{"code":".skew-pill-button::before,\n.skew-pill-button::after {\n transition: width 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"i48rv4yyl\",\"name\":\"code\",\"code\":\".skew-pill-button::before,\\n.skew-pill-button::after {\\n transition: width 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1fd8824b-33a5-45d6-8b75-26d272d2d2ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text color and press speed here:","styles":{}}],"children":[]},{"id":"54bdb503-4809-4d78-a1f3-9912aa07364c","type":"procode","props":{"code":".skew-pill-button {\n transition:\n transform 0.3s ease,\n border-color 0.3s ease;\n}\n\n.skew-pill-button span {\n transition: color 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qha5qudyq\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n transition:\\n transform 0.3s ease,\\n border-color 0.3s ease;\\n}\\n\\n.skew-pill-button span {\\n transition: color 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e21ee14-a10e-4d9c-adb5-b14b60c27d3f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the button background here:","styles":{}}],"children":[]},{"id":"3b3cca21-4af9-4cef-850b-2a1b26a972b5","type":"procode","props":{"code":".skew-pill-button {\n background: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ot8z2s5z1\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n background: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"364e1ebe-058c-4691-afa5-4987d41f3810","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the border and text color here:","styles":{}}],"children":[]},{"id":"4087ffad-c35f-41af-9e95-bc0dbb20ecee","type":"procode","props":{"code":".skew-pill-button {\n border: 1px solid #03045e;\n}\n\n.skew-pill-button span {\n color: #03045e;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vlp80i7h5\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n border: 1px solid #03045e;\\n}\\n\\n.skew-pill-button span {\\n color: #03045e;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0aaee627-294f-46e8-b73b-b5c72db4ea63","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the purple fill color here:","styles":{}}],"children":[]},{"id":"5f12f415-5ff8-4d50-be0d-320ea4fb2123","type":"procode","props":{"code":".skew-pill-button::before,\n.skew-pill-button::after {\n background: #5a189a;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mir25pxee\",\"name\":\"code\",\"code\":\".skew-pill-button::before,\\n.skew-pill-button::after {\\n background: #5a189a;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"89b7acf6-e04b-457f-8dc7-42d96153ea64","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":"8d29c249-156a-4d6a-86f4-22723d7e5a1b","type":"procode","props":{"code":".skew-pill-button {\n width: 150px;\n height: 50px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7zu2u6inz\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n width: 150px;\\n height: 50px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c4372f45-d538-4d54-9332-8fb44c7346c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pill roundness here:","styles":{}}],"children":[]},{"id":"d635c725-1c10-4d5e-9fc2-e646e90f88f9","type":"procode","props":{"code":".skew-pill-button {\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"3ddh7lx8x\",\"name\":\"code\",\"code\":\".skew-pill-button {\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0d031ffd-f674-45bc-a0a9-5eeae9cfc336","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"6fb5b2fc-984d-45d6-b126-5ad338748199","type":"procode","props":{"code":".skew-pill-button span {\n font-size: 18px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"806ky0pr5\",\"name\":\"code\",\"code\":\".skew-pill-button span {\\n font-size: 18px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fba91438-6674-4ba0-9208-381cd492c6e2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Width\n","styles":{"bold":true}},{"type":"text","text":"Change how much each side fills on hover here:","styles":{}}],"children":[]},{"id":"9f97c123-e80e-42df-befa-fec4fbdeff82","type":"procode","props":{"code":".skew-pill-button:hover::before,\n.skew-pill-button:hover::after {\n width: 60%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xzuzn04cc\",\"name\":\"code\",\"code\":\".skew-pill-button:hover::before,\\n.skew-pill-button:hover::after {\\n width: 60%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0afc08ed-cc74-4682-b105-1d6ff01ab08a","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":"16f9eb66-620a-42fa-aa88-0a985f1f370c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"l6qcr0g71\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3eca6bdc-0ad4-4f7c-8692-06ba9908a1dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]