Origin left Button

[{"id":"e54b1a86-5428-4302-900d-c0d73c6e7f94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"efed9f5e-98c9-439d-92aa-2c5283a4c4c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4ea7444b-ee9c-47eb-ad5b-a893f98fb5e0","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: #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.arrow-button {\\n --primary-color: #000000;\\n --hovered-color: #5d3fd3;\\n\\n margin: 0;\\n padding: 0;\\n border: none;\\n background: none;\\n cursor: pointer;\\n\\n position: relative;\\n display: flex;\\n align-items: center;\\n gap: 0.5rem;\\n\\n font-size: 20px;\\n font-weight: 600;\\n}\\n\\n.arrow-button-text {\\n margin: 0;\\n position: relative;\\n color: var(--primary-color);\\n font-size: 20px;\\n line-height: 1;\\n}\\n\\n.arrow-button-text::before {\\n content: \\\"Get Started\\\";\\n position: absolute;\\n inset: 0;\\n width: 0;\\n color: var(--hovered-color);\\n overflow: hidden;\\n white-space: nowrap;\\n transition: width 0.35s ease;\\n}\\n\\n.arrow-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n bottom: -7px;\\n width: 0;\\n height: 2px;\\n background: var(--hovered-color);\\n transition: width 0.35s ease;\\n}\\n\\n.arrow-button-icon {\\n width: 15px;\\n color: var(--primary-color);\\n position: relative;\\n transition:\\n transform 0.25s ease,\\n color 0.25s ease;\\n transition-delay: 0.15s;\\n}\\n\\n.arrow-button:hover::after {\\n width: 100%;\\n}\\n\\n.arrow-button:hover .arrow-button-text::before {\\n width: 100%;\\n}\\n\\n.arrow-button:hover .arrow-button-icon {\\n transform: translateX(4px);\\n color: var(--hovered-color);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Origin left 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":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"95ab6794-25a0-4b0b-b3e4-9ff16f152c2a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"fd4dc499-9543-4ec9-aa56-6895ca0b2347","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb81f15f-aed8-4569-b4a9-d4df30a76d16","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"d290d718-71cd-4ac0-a808-0f2e24e56f8d","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: #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.arrow-button {\\n --primary-color: #000000;\\n --hovered-color: #5d3fd3;\\n\\n margin: 0;\\n padding: 0;\\n border: none;\\n background: none;\\n cursor: pointer;\\n\\n position: relative;\\n display: flex;\\n align-items: center;\\n gap: 0.5rem;\\n\\n font-size: 20px;\\n font-weight: 600;\\n}\\n\\n.arrow-button-text {\\n margin: 0;\\n position: relative;\\n color: var(--primary-color);\\n font-size: 20px;\\n line-height: 1;\\n}\\n\\n.arrow-button-text::before {\\n content: \\\"Get Started\\\";\\n position: absolute;\\n inset: 0;\\n width: 0;\\n color: var(--hovered-color);\\n overflow: hidden;\\n white-space: nowrap;\\n transition: width 0.35s ease;\\n}\\n\\n.arrow-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n bottom: -7px;\\n width: 0;\\n height: 2px;\\n background: var(--hovered-color);\\n transition: width 0.35s ease;\\n}\\n\\n.arrow-button-icon {\\n width: 15px;\\n color: var(--primary-color);\\n position: relative;\\n transition:\\n transform 0.25s ease,\\n color 0.25s ease;\\n transition-delay: 0.15s;\\n}\\n\\n.arrow-button:hover::after {\\n width: 100%;\\n}\\n\\n.arrow-button:hover .arrow-button-text::before {\\n width: 100%;\\n}\\n\\n.arrow-button:hover .arrow-button-icon {\\n transform: translateX(4px);\\n color: var(--hovered-color);\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c2bf2f3b-1b56-4074-9ba6-0c21a15c960f","type":"divider","props":{},"children":[]},{"id":"2de0f0a0-1045-4012-8154-4291ba8b1432","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"5b529d31-b7e5-43f3-93f3-d7050b09e4ba","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 clean text arrow button. It starts with black text and a black arrow, then changes to purple on hover.","styles":{}}],"children":[]},{"id":"03ca2664-0015-4b4e-b58a-65cb74708cd8","type":"procode","props":{"code":".arrow-button {\n --primary-color: #000000;\n --hovered-color: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m08yxr6xi\",\"name\":\"code\",\"code\":\".arrow-button {\\n --primary-color: #000000;\\n --hovered-color: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e594fd67-8db7-4f40-a53f-20f622720025","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":"d2315352-0791-43b9-808a-6ffe148040f6","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gpcwm2nos\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b55125fa-2e2b-49d8-8df0-d3b455ec449f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n","styles":{"bold":true}},{"type":"text","text":"The button removes default browser styling. It uses ","styles":{}},{"type":"text","text":"display: flex","styles":{"code":true}},{"type":"text","text":" so the text and arrow stay in one horizontal row.","styles":{}}],"children":[]},{"id":"c27de9e8-e876-4336-9d03-67186037d63e","type":"procode","props":{"code":".arrow-button {\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n font-size: 20px;\n font-weight: 600;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0gw6485p6\",\"name\":\"code\",\"code\":\".arrow-button {\\n margin: 0;\\n padding: 0;\\n border: none;\\n background: none;\\n cursor: pointer;\\n\\n position: relative;\\n display: flex;\\n align-items: center;\\n gap: 0.5rem;\\n\\n font-size: 20px;\\n font-weight: 600;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"690c395a-b127-4b52-8520-9b911c5bcd8a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Base State\n","styles":{"bold":true}},{"type":"text","text":"The visible text uses black color by default. ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" is important because the hover text layer is placed on top of it.","styles":{}}],"children":[]},{"id":"7568a438-e2f8-4bd3-8f5f-1fdafee82fb9","type":"procode","props":{"code":".arrow-button-text {\n margin: 0;\n position: relative;\n color: var(--primary-color);\n font-size: 20px;\n line-height: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zbcekg3ld\",\"name\":\"code\",\"code\":\".arrow-button-text {\\n margin: 0;\\n position: relative;\\n color: var(--primary-color);\\n font-size: 20px;\\n line-height: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da580434-75f9-4cf7-9d11-6338c0891cea","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Fill Setup\n","styles":{"bold":true}},{"type":"text","text":"The purple hover text is created using ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":". It starts with ","styles":{}},{"type":"text","text":"width: 0","styles":{"code":true}},{"type":"text","text":", so the purple text is hidden before hover.","styles":{}}],"children":[]},{"id":"ac86c6ed-597f-46bf-8b84-3409e36564b8","type":"procode","props":{"code":".arrow-button-text::before {\n content: \"Get Started\";\n position: absolute;\n inset: 0;\n width: 0;\n color: var(--hovered-color);\n overflow: hidden;\n white-space: nowrap;\n transition: width 0.35s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qogjhz3ua\",\"name\":\"code\",\"code\":\".arrow-button-text::before {\\n content: \\\"Get Started\\\";\\n position: absolute;\\n inset: 0;\\n width: 0;\\n color: var(--hovered-color);\\n overflow: hidden;\\n white-space: nowrap;\\n transition: width 0.35s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5898d055-781a-4db5-840a-2fdbcc6ba641","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Fill Animation\n","styles":{"bold":true}},{"type":"text","text":"On hover, the pseudo text expands to ","styles":{}},{"type":"text","text":"width: 100%","styles":{"code":true}},{"type":"text","text":". This creates the left-to-right purple text reveal.","styles":{}}],"children":[]},{"id":"36ab9a3a-0cb3-4011-bf8f-c8228aa2f58c","type":"procode","props":{"code":".arrow-button:hover .arrow-button-text::before {\n width: 100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mfojxmlc9\",\"name\":\"code\",\"code\":\".arrow-button:hover .arrow-button-text::before {\\n width: 100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"20412bd4-0a4c-4b44-87ad-bd02001c1d48","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Underline Setup\n","styles":{"bold":true}},{"type":"text","text":"The underline is created with ","styles":{}},{"type":"text","text":".arrow-button::after","styles":{"code":true}},{"type":"text","text":". It starts hidden with ","styles":{}},{"type":"text","text":"width: 0","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"fdb955c9-ec74-4922-96ee-edf3202bd3a5","type":"procode","props":{"code":".arrow-button::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: -7px;\n width: 0;\n height: 2px;\n background: var(--hovered-color);\n transition: width 0.35s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zqfmbuvjn\",\"name\":\"code\",\"code\":\".arrow-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n bottom: -7px;\\n width: 0;\\n height: 2px;\\n background: var(--hovered-color);\\n transition: width 0.35s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a59e14f-9ff9-4a3f-9010-9f9edb161098","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Underline Animation\n","styles":{"bold":true}},{"type":"text","text":"On hover, the underline grows across the full button width.","styles":{}}],"children":[]},{"id":"23a7e4d4-343b-4a95-a68d-aae6febf09f0","type":"procode","props":{"code":".arrow-button:hover::after {\n width: 100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"prhbb9wcy\",\"name\":\"code\",\"code\":\".arrow-button:hover::after {\\n width: 100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ccc305be-b35b-4e9b-9644-db53cbf77dfa","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Icon\n","styles":{"bold":true}},{"type":"text","text":"The arrow starts black and has a small size. It uses ","styles":{}},{"type":"text","text":"transition","styles":{"code":true}},{"type":"text","text":" for smooth movement and color change.","styles":{}}],"children":[]},{"id":"4c7c6f3b-ef8e-4c44-90bb-7f1cb47716f7","type":"procode","props":{"code":".arrow-button-icon {\n width: 15px;\n color: var(--primary-color);\n position: relative;\n transition:\n transform 0.25s ease,\n color 0.25s ease;\n transition-delay: 0.15s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tsusf505w\",\"name\":\"code\",\"code\":\".arrow-button-icon {\\n width: 15px;\\n color: var(--primary-color);\\n position: relative;\\n transition:\\n transform 0.25s ease,\\n color 0.25s ease;\\n transition-delay: 0.15s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"23ab75c2-6ad0-4191-8091-525f74092d33","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Hover Motion\n","styles":{"bold":true}},{"type":"text","text":"On hover, the arrow moves slightly to the right and changes to purple.","styles":{}}],"children":[]},{"id":"f28f891d-e0f7-4878-aabf-efd8e0981f30","type":"procode","props":{"code":".arrow-button:hover .arrow-button-icon {\n transform: translateX(4px);\n color: var(--hovered-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"cq72civmx\",\"name\":\"code\",\"code\":\".arrow-button:hover .arrow-button-icon {\\n transform: translateX(4px);\\n color: var(--hovered-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2a9a757d-4e8b-43fc-94b6-1d58bf381da3","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 code flow. The text reveal and underline use ","styles":{}},{"type":"text","text":"width","styles":{"code":true}},{"type":"text","text":", while the arrow uses ","styles":{}},{"type":"text","text":"transform","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9904fe72-9d0a-4a5c-ad1a-3d45100e662f","type":"procode","props":{"code":".arrow-button:hover .arrow-button-text::before {\n width: 100%;\n}\n\n.arrow-button:hover::after {\n width: 100%;\n}\n\n.arrow-button:hover .arrow-button-icon {\n transform: translateX(4px);\n color: var(--hovered-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"u3feco9ta\",\"name\":\"code\",\"code\":\".arrow-button:hover .arrow-button-text::before {\\n width: 100%;\\n}\\n\\n.arrow-button:hover::after {\\n width: 100%;\\n}\\n\\n.arrow-button:hover .arrow-button-icon {\\n transform: translateX(4px);\\n color: var(--hovered-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b9f6cc96-05cb-4aa4-88b3-29e973ec4b2a","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 text already exists inside ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":", but it is clipped by ","styles":{}},{"type":"text","text":"width: 0","styles":{"code":true}},{"type":"text","text":". When width grows, the text appears from left to right.","styles":{}}],"children":[]},{"id":"067591b6-b6ad-4a03-9816-7a2f5cf18183","type":"procode","props":{"code":".arrow-button-text::before {\n width: 0;\n overflow: hidden;\n white-space: nowrap;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9nm0zd5yw\",\"name\":\"code\",\"code\":\".arrow-button-text::before {\\n width: 0;\\n overflow: hidden;\\n white-space: nowrap;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2566736-b915-4a81-80e6-055a5ed68d92","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why The CSS Text Must Match HTML Text\n","styles":{"bold":true}},{"type":"text","text":"The real text is inside the HTML, but the hover text is duplicated in CSS. Both must stay the same so the hover fill aligns perfectly.","styles":{}}],"children":[]},{"id":"fb504faa-97a1-421b-878f-9fd2ad4f549a","type":"procode","props":{"code":"

Get Started

","language":"javascript","filename":"","files":"[{\"id\":\"tx3p09eki\",\"name\":\"code\",\"code\":\"

Get Started

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"985956b9-b8dd-4687-b272-800e939a5b76","type":"procode","props":{"code":".arrow-button-text::before {\n content: \"Get Started\";\n}","language":"javascript","filename":"","files":"[{\"id\":\"5bwu5a49l\",\"name\":\"code\",\"code\":\".arrow-button-text::before {\\n content: \\\"Get Started\\\";\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f60f302-6a02-4431-b158-ed0768b75253","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The text and underline animate in ","styles":{}},{"type":"text","text":"0.35s","styles":{"code":true}},{"type":"text","text":". The arrow animates in ","styles":{}},{"type":"text","text":"0.25s","styles":{"code":true}},{"type":"text","text":" with a ","styles":{}},{"type":"text","text":"0.15s","styles":{"code":true}},{"type":"text","text":" delay, so it moves slightly after the text starts filling.","styles":{}}],"children":[]},{"id":"8d362e4c-c428-4a50-b723-d777776a7f19","type":"procode","props":{"code":".arrow-button-text::before {\n transition: width 0.35s ease;\n}\n\n.arrow-button::after {\n transition: width 0.35s ease;\n}\n\n.arrow-button-icon {\n transition:\n transform 0.25s ease,\n color 0.25s ease;\n transition-delay: 0.15s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2jlra05r3\",\"name\":\"code\",\"code\":\".arrow-button-text::before {\\n transition: width 0.35s ease;\\n}\\n\\n.arrow-button::after {\\n transition: width 0.35s ease;\\n}\\n\\n.arrow-button-icon {\\n transition:\\n transform 0.25s ease,\\n color 0.25s ease;\\n transition-delay: 0.15s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"016f80f5-2645-4a30-b38e-f9dd5750e98d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the text and underline speed here:","styles":{}}],"children":[]},{"id":"b4b9ab6f-9942-41c6-ab78-fcc9b5c13b52","type":"procode","props":{"code":".arrow-button-text::before,\n.arrow-button::after {\n transition: width 0.35s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qmycqmqct\",\"name\":\"code\",\"code\":\".arrow-button-text::before,\\n.arrow-button::after {\\n transition: width 0.35s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb73fc67-5c73-4233-8777-bf7a9f83534a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow movement speed here:","styles":{}}],"children":[]},{"id":"fb2782ce-3d92-4d8c-88e5-b1df0a1ee5f3","type":"procode","props":{"code":".arrow-button-icon {\n transition:\n transform 0.25s ease,\n color 0.25s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"l8xghxmws\",\"name\":\"code\",\"code\":\".arrow-button-icon {\\n transition:\\n transform 0.25s ease,\\n color 0.25s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"049f607c-d733-4fce-8634-125b196245a0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the default text and arrow color here:","styles":{}}],"children":[]},{"id":"a82edd02-bf73-4f11-96d5-a718f710269e","type":"procode","props":{"code":".arrow-button {\n --primary-color: #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x1h0cm0l6\",\"name\":\"code\",\"code\":\".arrow-button {\\n --primary-color: #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e236a58-bb0e-4ff8-ae40-b037d8679ec5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover text, underline, and arrow color here:","styles":{}}],"children":[]},{"id":"affa5400-3c99-47fc-8d2c-6b24433d6e89","type":"procode","props":{"code":".arrow-button {\n --hovered-color: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"in58d5sim\",\"name\":\"code\",\"code\":\".arrow-button {\\n --hovered-color: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9c4bbd86-adef-4ccc-87e1-1d367260a5c2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"0568f560-590e-41a8-ae01-4fad12f664e8","type":"procode","props":{"code":".arrow-button,\n.arrow-button-text {\n font-size: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7dmlb88w0\",\"name\":\"code\",\"code\":\".arrow-button,\\n.arrow-button-text {\\n font-size: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eed6c48a-431f-40b2-8d78-a84afd5126d2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the spacing between text and arrow here:","styles":{}}],"children":[]},{"id":"39429925-f8a0-497d-9efd-d434669bcd85","type":"procode","props":{"code":".arrow-button {\n gap: 0.5rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2qdzxynty\",\"name\":\"code\",\"code\":\".arrow-button {\\n gap: 0.5rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85a86ae9-33af-4fb3-902c-a2a42f015df5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow size here:","styles":{}}],"children":[]},{"id":"a762b0d2-969e-43f8-b87f-9f2d1ddbe696","type":"procode","props":{"code":".arrow-button-icon {\n width: 15px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"14had8c0t\",\"name\":\"code\",\"code\":\".arrow-button-icon {\\n width: 15px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30735fe9-c5d0-4a6f-9c71-484c06f446e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the underline position and thickness here:","styles":{}}],"children":[]},{"id":"214a0aba-3bdb-4294-973b-7afcf6487663","type":"procode","props":{"code":".arrow-button::after {\n bottom: -7px;\n height: 2px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tpdjhmpcn\",\"name\":\"code\",\"code\":\".arrow-button::after {\\n bottom: -7px;\\n height: 2px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f787e32-4c75-4642-a71c-1ffefc8cba8b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the visible button text here:","styles":{}}],"children":[]},{"id":"6729fb69-e300-4710-baab-470fd3b854a2","type":"procode","props":{"code":"

Get Started

","language":"javascript","filename":"","files":"[{\"id\":\"duyqy3de3\",\"name\":\"code\",\"code\":\"

Get Started

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d509f903-0af9-44ee-abee-31e51d02f1b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then also update the matching CSS content here:","styles":{}}],"children":[]},{"id":"0656a480-2383-4bfd-aedb-4bc2c4339603","type":"procode","props":{"code":".arrow-button-text::before {\n content: \"Get Started\";\n}","language":"javascript","filename":"","files":"[{\"id\":\"cu69dty3q\",\"name\":\"code\",\"code\":\".arrow-button-text::before {\\n content: \\\"Get Started\\\";\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9fa14957-3a1c-4897-b0b7-f4716b392634","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"This component does not need JavaScript. The whole interaction is handled with CSS hover, pseudo-elements, width transitions, and transform movement.","styles":{}}],"children":[]},{"id":"234b1725-fbd1-4a07-8c42-8c0850e2ef62","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]