Purple Arrow Pill Button

[{"id":"28e2e62a-4b1f-4730-96b5-35645b847303","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2a35bea3-f5c9-47c9-a0ae-8c60e6944b78","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-bg: #7808d0;\\n --button-border: #5d07a3;\\n --button-shadow: #4c0687;\\n --button-text: #ffffff;\\n --icon-size: 22px;\\n --icon-left: 22px;\\n --button-height: 46px;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\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.button-with-icon {\\n overflow: hidden;\\n\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n width: fit-content;\\n min-width: max-content;\\n height: var(--button-height);\\n padding: 0 24px;\\n\\n border: 1px solid var(--button-border);\\n border-radius: 999px;\\n outline: none;\\n background: var(--button-bg);\\n color: var(--button-text);\\n\\n font-family: Arial, Helvetica, sans-serif;\\n font-size: 14px;\\n font-weight: 700;\\n letter-spacing: 1px;\\n text-align: center;\\n text-transform: uppercase;\\n white-space: nowrap;\\n text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);\\n\\n user-select: none;\\n cursor: pointer;\\n position: relative;\\n transform: translateY(0);\\n\\n box-shadow:\\n inset 0 30px 30px -15px rgba(255, 255, 255, 0.14),\\n inset 0 0 0 1px rgba(255, 255, 255, 0.2),\\n 0 4px 0 var(--button-shadow),\\n 0 6px 12px rgba(120, 8, 208, 0.25);\\n\\n transition:\\n transform 150ms ease-in-out,\\n box-shadow 150ms ease-in-out,\\n background 150ms ease-in-out;\\n}\\n\\n.icon {\\n width: var(--icon-size);\\n height: var(--icon-size);\\n\\n position: absolute;\\n top: 50%;\\n left: var(--icon-left);\\n\\n color: var(--button-text);\\n transform: translateY(-50%);\\n\\n transition:\\n left 0.5s ease-in-out,\\n transform 0.5s ease-in-out;\\n}\\n\\n.text {\\n display: inline-block;\\n margin-left: calc(var(--icon-size) + 8px);\\n\\n transition: transform 0.5s ease-in-out;\\n}\\n\\n.button-with-icon:hover .text {\\n transform: translateX(calc(100% + 48px));\\n}\\n\\n.button-with-icon:hover .icon {\\n left: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.button-with-icon:active {\\n transform: translateY(4px);\\n\\n box-shadow:\\n inset 0 16px 2px -15px rgba(0, 0, 0, 0),\\n inset 0 0 0 1px rgba(255, 255, 255, 0.15),\\n 0 0 0 var(--button-shadow),\\n 0 0 0 2px rgba(120, 8, 208, 0.18);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Purple Arrow Pill Button\\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":"f5f84223-a16b-4cf7-84c0-5b86eabfbd22","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3dae801d-de67-44b3-bad0-3eef8b2b4eda","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"9d296f8a-1a42-44b3-ba19-a6f967786837","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78a3b4b0-eae3-4848-837b-7cd8d8788376","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"3e4d2819-9eb0-41ac-ae75-9f3ee67bc6a3","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-bg: #7808d0;\\n --button-border: #5d07a3;\\n --button-shadow: #4c0687;\\n --button-text: #ffffff;\\n --icon-size: 22px;\\n --icon-left: 22px;\\n --button-height: 46px;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\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.button-with-icon {\\n overflow: hidden;\\n\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n width: fit-content;\\n min-width: max-content;\\n height: var(--button-height);\\n padding: 0 24px;\\n\\n border: 1px solid var(--button-border);\\n border-radius: 999px;\\n outline: none;\\n background: var(--button-bg);\\n color: var(--button-text);\\n\\n font-family: Arial, Helvetica, sans-serif;\\n font-size: 14px;\\n font-weight: 700;\\n letter-spacing: 1px;\\n text-align: center;\\n text-transform: uppercase;\\n white-space: nowrap;\\n text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);\\n\\n user-select: none;\\n cursor: pointer;\\n position: relative;\\n transform: translateY(0);\\n\\n box-shadow:\\n inset 0 30px 30px -15px rgba(255, 255, 255, 0.14),\\n inset 0 0 0 1px rgba(255, 255, 255, 0.2),\\n 0 4px 0 var(--button-shadow),\\n 0 6px 12px rgba(120, 8, 208, 0.25);\\n\\n transition:\\n transform 150ms ease-in-out,\\n box-shadow 150ms ease-in-out,\\n background 150ms ease-in-out;\\n}\\n\\n.icon {\\n width: var(--icon-size);\\n height: var(--icon-size);\\n\\n position: absolute;\\n top: 50%;\\n left: var(--icon-left);\\n\\n color: var(--button-text);\\n transform: translateY(-50%);\\n\\n transition:\\n left 0.5s ease-in-out,\\n transform 0.5s ease-in-out;\\n}\\n\\n.text {\\n display: inline-block;\\n margin-left: calc(var(--icon-size) + 8px);\\n\\n transition: transform 0.5s ease-in-out;\\n}\\n\\n.button-with-icon:hover .text {\\n transform: translateX(calc(100% + 48px));\\n}\\n\\n.button-with-icon:hover .icon {\\n left: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.button-with-icon:active {\\n transform: translateY(4px);\\n\\n box-shadow:\\n inset 0 16px 2px -15px rgba(0, 0, 0, 0),\\n inset 0 0 0 1px rgba(255, 255, 255, 0.15),\\n 0 0 0 var(--button-shadow),\\n 0 0 0 2px rgba(120, 8, 208, 0.18);\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"88e50918-b37d-4439-ae09-828f305e9e9d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"e64c1d6e-92af-4068-90e3-97344991f70d","type":"divider","props":{},"children":[]},{"id":"8bb36a0e-36a2-4ee2-a0e1-a3bf63f60086","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"0bcfcf68-d533-49c4-9370-6221879b8db2","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 arrow pill button. It uses a glossy purple surface, white uppercase text, an absolute-positioned arrow icon, and a bottom shadow for a pressed 3D feel.","styles":{}}],"children":[]},{"id":"2553b8dc-88f2-4c41-8b6d-6a4a828ebb3d","type":"procode","props":{"code":":root {\n --button-bg: #7808d0;\n --button-border: #5d07a3;\n --button-shadow: #4c0687;\n --button-text: #ffffff;\n --icon-size: 22px;\n --icon-left: 22px;\n --button-height: 46px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"f846kz9v7\",\"name\":\"code\",\"code\":\":root {\\n --button-bg: #7808d0;\\n --button-border: #5d07a3;\\n --button-shadow: #4c0687;\\n --button-text: #ffffff;\\n --icon-size: 22px;\\n --icon-left: 22px;\\n --button-height: 46px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"792dc11b-7d1c-4af6-ac9f-24db9b11264e","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 center.","styles":{}}],"children":[]},{"id":"84b00b03-2ca6-4b6c-a0c4-08383eee2f15","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4rmkzh2as\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"65d479e0-9f64-4e2a-bbcd-70586103b3d4","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":".button-with-icon","styles":{"code":true}},{"type":"text","text":" is a pill button. It uses ","styles":{}},{"type":"text","text":"width: fit-content","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"min-width: max-content","styles":{"code":true}},{"type":"text","text":", so the button expands based on the ","styles":{}},{"type":"text","text":"Get Started","styles":{"code":true}},{"type":"text","text":" text.","styles":{}}],"children":[]},{"id":"d497a469-e5fa-4b3b-8cea-6f494200dc67","type":"procode","props":{"code":".button-with-icon {\n overflow: hidden;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n width: fit-content;\n min-width: max-content;\n height: var(--button-height);\n padding: 0 24px;\n\n border: 1px solid var(--button-border);\n border-radius: 999px;\n outline: none;\n background: var(--button-bg);\n color: var(--button-text);\n\n user-select: none;\n cursor: pointer;\n position: relative;\n transform: translateY(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"778tfevbn\",\"name\":\"code\",\"code\":\".button-with-icon {\\n overflow: hidden;\\n\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n width: fit-content;\\n min-width: max-content;\\n height: var(--button-height);\\n padding: 0 24px;\\n\\n border: 1px solid var(--button-border);\\n border-radius: 999px;\\n outline: none;\\n background: var(--button-bg);\\n color: var(--button-text);\\n\\n user-select: none;\\n cursor: pointer;\\n position: relative;\\n transform: translateY(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e01d3dab-4b98-4e74-ba9a-88f28fdc8681","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Text Style\n","styles":{"bold":true}},{"type":"text","text":"The text is white, bold, uppercase, and uses letter spacing to make it feel more like a compact CTA button.","styles":{}}],"children":[]},{"id":"43f98089-64a9-41f3-b030-fb5c059e3745","type":"procode","props":{"code":".button-with-icon {\n font-family: Arial, Helvetica, sans-serif;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 1px;\n text-align: center;\n text-transform: uppercase;\n white-space: nowrap;\n text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);\n}","language":"javascript","filename":"","files":"[{\"id\":\"hn9wqyfm4\",\"name\":\"code\",\"code\":\".button-with-icon {\\n font-family: Arial, Helvetica, sans-serif;\\n font-size: 14px;\\n font-weight: 700;\\n letter-spacing: 1px;\\n text-align: center;\\n text-transform: uppercase;\\n white-space: nowrap;\\n text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b3df2e05-64ef-466b-9db4-3e9c137569fb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Glossy Shadow Effect\n","styles":{"bold":true}},{"type":"text","text":"The button uses multiple shadows. The inset shadows create the glossy top highlight, while the outer shadows create the purple raised depth.","styles":{}}],"children":[]},{"id":"b630bb58-6112-4bf4-b64f-dc8eb2382617","type":"procode","props":{"code":".button-with-icon {\n box-shadow:\n inset 0 30px 30px -15px rgba(255, 255, 255, 0.14),\n inset 0 0 0 1px rgba(255, 255, 255, 0.2),\n 0 4px 0 var(--button-shadow),\n 0 6px 12px rgba(120, 8, 208, 0.25);\n}","language":"javascript","filename":"","files":"[{\"id\":\"6z1pnpizd\",\"name\":\"code\",\"code\":\".button-with-icon {\\n box-shadow:\\n inset 0 30px 30px -15px rgba(255, 255, 255, 0.14),\\n inset 0 0 0 1px rgba(255, 255, 255, 0.2),\\n 0 4px 0 var(--button-shadow),\\n 0 6px 12px rgba(120, 8, 208, 0.25);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ea727cff-c805-4989-b07a-1b241a4136f2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Base\n","styles":{"bold":true}},{"type":"text","text":"The arrow icon is positioned absolutely on the left side of the button. It starts at ","styles":{}},{"type":"text","text":"left: var(--icon-left)","styles":{"code":true}},{"type":"text","text":" and is vertically centered with ","styles":{}},{"type":"text","text":"top: 50%","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"2571ad28-a8ee-4864-81f4-7b8bba59a6dc","type":"procode","props":{"code":".icon {\n width: var(--icon-size);\n height: var(--icon-size);\n\n position: absolute;\n top: 50%;\n left: var(--icon-left);\n\n color: var(--button-text);\n transform: translateY(-50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"eavfn0l78\",\"name\":\"code\",\"code\":\".icon {\\n width: var(--icon-size);\\n height: var(--icon-size);\\n\\n position: absolute;\\n top: 50%;\\n left: var(--icon-left);\\n\\n color: var(--button-text);\\n transform: translateY(-50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a5e2546d-54c7-4694-9cba-bec6be4a8d35","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Base\n","styles":{"bold":true}},{"type":"text","text":"The text has left margin equal to the icon size plus ","styles":{}},{"type":"text","text":"8px","styles":{"code":true}},{"type":"text","text":". This creates space so the text does not overlap the absolute icon.","styles":{}}],"children":[]},{"id":"9d00e818-60b8-4c65-864e-85304923d37c","type":"procode","props":{"code":".text {\n display: inline-block;\n margin-left: calc(var(--icon-size) + 8px);\n\n transition: transform 0.5s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"3vcuwa7v7\",\"name\":\"code\",\"code\":\".text {\\n display: inline-block;\\n margin-left: calc(var(--icon-size) + 8px);\\n\\n transition: transform 0.5s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"867d2ed7-89e1-458a-95fc-25d77d45312d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Text Movement\n","styles":{"bold":true}},{"type":"text","text":"On hover, the text moves to the right until it leaves the button area. Because the button has ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":", the text disappears cleanly inside the pill.","styles":{}}],"children":[]},{"id":"495dcfdb-3adf-4728-8e92-3fce86342a37","type":"procode","props":{"code":".button-with-icon:hover .text {\n transform: translateX(calc(100% + 48px));\n}","language":"javascript","filename":"","files":"[{\"id\":\"3norpcc2x\",\"name\":\"code\",\"code\":\".button-with-icon:hover .text {\\n transform: translateX(calc(100% + 48px));\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"96d4b5ea-1fbb-4021-9832-82bd829bec91","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Icon Movement\n","styles":{"bold":true}},{"type":"text","text":"On hover, the icon moves from the left side to the exact center of the button.","styles":{}}],"children":[]},{"id":"0f9c2e99-8ffc-492c-8f84-bf4582ffd101","type":"procode","props":{"code":".button-with-icon:hover .icon {\n left: 50%;\n transform: translate(-50%, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"7jxnwzhg1\",\"name\":\"code\",\"code\":\".button-with-icon:hover .icon {\\n left: 50%;\\n transform: translate(-50%, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"abd3b8de-22fa-48cc-a3ea-2e9009802216","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 text slides outside the button on hover. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" clips the text so it does not appear outside the rounded pill.","styles":{}}],"children":[]},{"id":"52d92439-3c7b-48d1-bd0c-e158953c4a4a","type":"procode","props":{"code":".button-with-icon {\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"q0x6ulb3b\",\"name\":\"code\",\"code\":\".button-with-icon {\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0f861b80-6633-4a8b-9e71-d6d9db76390b","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 moves down by ","styles":{}},{"type":"text","text":"4px","styles":{"code":true}},{"type":"text","text":" and the bottom shadow disappears. This creates the pressed button effect.","styles":{}}],"children":[]},{"id":"22fb10d1-3aa1-4101-ad67-312fa3fe9617","type":"procode","props":{"code":".button-with-icon:active {\n transform: translateY(4px);\n\n box-shadow:\n inset 0 16px 2px -15px rgba(0, 0, 0, 0),\n inset 0 0 0 1px rgba(255, 255, 255, 0.15),\n 0 0 0 var(--button-shadow),\n 0 0 0 2px rgba(120, 8, 208, 0.18);\n}","language":"javascript","filename":"","files":"[{\"id\":\"9bjctfo0j\",\"name\":\"code\",\"code\":\".button-with-icon:active {\\n transform: translateY(4px);\\n\\n box-shadow:\\n inset 0 16px 2px -15px rgba(0, 0, 0, 0),\\n inset 0 0 0 1px rgba(255, 255, 255, 0.15),\\n 0 0 0 var(--button-shadow),\\n 0 0 0 2px rgba(120, 8, 208, 0.18);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a9fdaa9-98e0-4c6f-af66-377a0da98e24","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Transition\n","styles":{"bold":true}},{"type":"text","text":"The button press animation is fast. It uses ","styles":{}},{"type":"text","text":"150ms","styles":{"code":true}},{"type":"text","text":" for transform, shadow, and background.","styles":{}}],"children":[]},{"id":"259827d0-5eb3-42d4-a568-bfae6aa1a421","type":"procode","props":{"code":".button-with-icon {\n transition:\n transform 150ms ease-in-out,\n box-shadow 150ms ease-in-out,\n background 150ms ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hup9g1vm9\",\"name\":\"code\",\"code\":\".button-with-icon {\\n transition:\\n transform 150ms ease-in-out,\\n box-shadow 150ms ease-in-out,\\n background 150ms ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8897b24a-5986-49ee-8719-7f04550f762d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Transition\n","styles":{"bold":true}},{"type":"text","text":"The icon animates both its ","styles":{}},{"type":"text","text":"left","styles":{"code":true}},{"type":"text","text":" position and ","styles":{}},{"type":"text","text":"transform","styles":{"code":true}},{"type":"text","text":", so it can move smoothly from the left side to the center.","styles":{}}],"children":[]},{"id":"d7540f20-6e84-4210-a2f3-a167805c10ce","type":"procode","props":{"code":".icon {\n transition:\n left 0.5s ease-in-out,\n transform 0.5s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"cmgzb9uwh\",\"name\":\"code\",\"code\":\".icon {\\n transition:\\n left 0.5s ease-in-out,\\n transform 0.5s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1b643f1-728f-45bc-bd85-d959b1d7035e","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. The text slides out, the icon moves to the center, and the button compresses when active.","styles":{}}],"children":[]},{"id":"b5b8228c-fba3-4ecd-b8a8-67ba02e07051","type":"procode","props":{"code":".button-with-icon:hover .text {\n transform: translateX(calc(100% + 48px));\n}\n\n.button-with-icon:hover .icon {\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.button-with-icon:active {\n transform: translateY(4px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"c3rouxlr3\",\"name\":\"code\",\"code\":\".button-with-icon:hover .text {\\n transform: translateX(calc(100% + 48px));\\n}\\n\\n.button-with-icon:hover .icon {\\n left: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.button-with-icon:active {\\n transform: translateY(4px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fd54ff32-6a82-40fa-bdf5-349842bf23d0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why The Icon Is Absolute\n","styles":{"bold":true}},{"type":"text","text":"The icon is removed from normal layout using ","styles":{}},{"type":"text","text":"position: absolute","styles":{"code":true}},{"type":"text","text":". This lets the text keep its own spacing while the icon can freely move to the center on hover.","styles":{}}],"children":[]},{"id":"78bc42af-83ce-43cf-b313-6e9872dd58c3","type":"procode","props":{"code":".icon {\n position: absolute;\n top: 50%;\n left: var(--icon-left);\n}","language":"javascript","filename":"","files":"[{\"id\":\"tsv09siv1\",\"name\":\"code\",\"code\":\".icon {\\n position: absolute;\\n top: 50%;\\n left: var(--icon-left);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6434ade2-cd2e-40d6-aef9-e5c9f8d89878","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"currentColor","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The SVG path uses ","styles":{}},{"type":"text","text":"fill=\"currentColor\"","styles":{"code":true}},{"type":"text","text":", so the icon automatically follows the button text color.","styles":{}}],"children":[]},{"id":"de7bd4e3-7411-4883-8a33-bd0b7a48969c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"a0iqozrb5\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fcbc80d6-4c53-41d1-90c7-12bded09bbd1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the button press speed here:","styles":{}}],"children":[]},{"id":"175ee31a-3cea-495a-ac16-4faef56a3954","type":"procode","props":{"code":".button-with-icon {\n transition:\n transform 150ms ease-in-out,\n box-shadow 150ms ease-in-out,\n background 150ms ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fyjkwlaa4\",\"name\":\"code\",\"code\":\".button-with-icon {\\n transition:\\n transform 150ms ease-in-out,\\n box-shadow 150ms ease-in-out,\\n background 150ms ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a0fc347-ca6e-4854-b91c-a8baa6093e07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text and icon slide speed here:","styles":{}}],"children":[]},{"id":"89a4f00f-22a1-43fe-9a4d-2d4cc7742a40","type":"procode","props":{"code":".icon {\n transition:\n left 0.5s ease-in-out,\n transform 0.5s ease-in-out;\n}\n\n.text {\n transition: transform 0.5s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nzx2t4h9s\",\"name\":\"code\",\"code\":\".icon {\\n transition:\\n left 0.5s ease-in-out,\\n transform 0.5s ease-in-out;\\n}\\n\\n.text {\\n transition: transform 0.5s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c83458c7-0eec-4d0c-8713-f10094b7c3a0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the main purple background here:","styles":{}}],"children":[]},{"id":"917fb1f8-a0a1-461e-8393-74260084399b","type":"procode","props":{"code":":root {\n --button-bg: #7808d0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4remk9mf1\",\"name\":\"code\",\"code\":\":root {\\n --button-bg: #7808d0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d0426369-9ec7-4fc5-9d10-51b75a101f14","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the border color here:","styles":{}}],"children":[]},{"id":"b2bf685b-de0f-455d-8485-876103bf701d","type":"procode","props":{"code":":root {\n --button-border: #5d07a3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ntro6fxdd\",\"name\":\"code\",\"code\":\":root {\\n --button-border: #5d07a3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b45b0ca2-fcdc-43e2-ac8b-29dd4ab87744","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the bottom shadow color here:","styles":{}}],"children":[]},{"id":"cf65db7a-7a90-4a0a-a70a-44a2f6c16343","type":"procode","props":{"code":":root {\n --button-shadow: #4c0687;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lznk2qqka\",\"name\":\"code\",\"code\":\":root {\\n --button-shadow: #4c0687;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a69d4fa9-db8f-4677-b368-f57c198a2a9a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text and icon color here:","styles":{}}],"children":[]},{"id":"d0c44cf3-d787-4fd6-9006-54ab8c574338","type":"procode","props":{"code":":root {\n --button-text: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kyevb73ps\",\"name\":\"code\",\"code\":\":root {\\n --button-text: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eec73d39-ee6c-4b7e-bd5a-0fb96df8a81a","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 height here:","styles":{}}],"children":[]},{"id":"269b2556-78e2-4692-93aa-3357a054ddf8","type":"procode","props":{"code":":root {\n --button-height: 46px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mfj0fz12y\",\"name\":\"code\",\"code\":\":root {\\n --button-height: 46px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1ee72ea-a04e-4e94-b767-a836940e6b77","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon size here:","styles":{}}],"children":[]},{"id":"fc1d13b5-70f0-46a5-b2d8-ff025c657d55","type":"procode","props":{"code":":root {\n --icon-size: 22px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2xdauwyoh\",\"name\":\"code\",\"code\":\":root {\\n --icon-size: 22px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d605a146-a61d-4102-971a-ecafbfaf82a3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon start position here:","styles":{}}],"children":[]},{"id":"6cd9485b-7872-4e6c-a68a-d0ff3b6f479a","type":"procode","props":{"code":":root {\n --icon-left: 22px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s6ggbzgbm\",\"name\":\"code\",\"code\":\":root {\\n --icon-left: 22px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5fe9f658-a036-46dc-a09a-2d84c28b49bf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button horizontal spacing here:","styles":{}}],"children":[]},{"id":"664e319d-e722-48bf-a875-3d7b958bb5c9","type":"procode","props":{"code":".button-with-icon {\n padding: 0 24px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"os6gklbbb\",\"name\":\"code\",\"code\":\".button-with-icon {\\n padding: 0 24px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8fa7768e-15ea-4a67-ac8b-2ea6ea883c0f","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":"34522589-53a9-43de-ae66-9a70ec829de8","type":"procode","props":{"code":"Get Started","language":"javascript","filename":"","files":"[{\"id\":\"00t78x8mk\",\"name\":\"code\",\"code\":\"Get Started\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf707c55-9984-4080-8350-bb3e103d70bf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]