Circle ltr expand Button

[{"id":"03ec9b2b-412f-467d-831d-e38741e65c35","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9f04948b-6481-421d-8a1a-d6161861b1c3","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: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.purple-cta-button {\\n position: relative;\\n isolation: isolate;\\n margin: auto;\\n padding: 12px 18px;\\n border: none;\\n border-radius: 50px;\\n background: none;\\n cursor: pointer;\\n overflow: hidden;\\n transition: transform 0.2s ease;\\n}\\n\\n.purple-cta-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: 0;\\n left: 0;\\n z-index: -1;\\n display: block;\\n width: 45px;\\n height: 45px;\\n border-radius: 50px;\\n background: #5d3fd3;\\n transition: width 0.3s ease;\\n}\\n\\n.purple-cta-button span {\\n position: relative;\\n z-index: 1;\\n font-family: \\\"Ubuntu\\\", sans-serif;\\n font-size: 18px;\\n font-weight: 700;\\n letter-spacing: 0.05em;\\n color: #111111;\\n transition: color 0.3s ease;\\n}\\n\\n.purple-cta-button svg {\\n position: relative;\\n z-index: 1;\\n top: 0;\\n margin-left: 10px;\\n fill: none;\\n stroke: #111111;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n transform: translateX(-5px);\\n transition:\\n transform 0.3s ease,\\n stroke 0.3s ease;\\n}\\n\\n.purple-cta-button:hover::before {\\n width: 100%;\\n}\\n\\n.purple-cta-button:hover span {\\n color: #ffffff;\\n}\\n\\n.purple-cta-button:hover svg {\\n stroke: #ffffff;\\n transform: translateX(0);\\n}\\n\\n.purple-cta-button:active {\\n transform: scale(0.95);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .purple-cta-button,\\n .purple-cta-button::before,\\n .purple-cta-button span,\\n .purple-cta-button svg {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Circle ltr expand 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":"92a48910-67bc-4051-aae1-b713dc958469","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"0954a387-f52e-4a48-9ee7-e3740dafdddd","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a32d475-4a3c-4bc7-bda2-4b0ac6aea060","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"b6cec732-b9c5-4e4c-ad25-53113d79328d","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: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.purple-cta-button {\\n position: relative;\\n isolation: isolate;\\n margin: auto;\\n padding: 12px 18px;\\n border: none;\\n border-radius: 50px;\\n background: none;\\n cursor: pointer;\\n overflow: hidden;\\n transition: transform 0.2s ease;\\n}\\n\\n.purple-cta-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: 0;\\n left: 0;\\n z-index: -1;\\n display: block;\\n width: 45px;\\n height: 45px;\\n border-radius: 50px;\\n background: #5d3fd3;\\n transition: width 0.3s ease;\\n}\\n\\n.purple-cta-button span {\\n position: relative;\\n z-index: 1;\\n font-family: \\\"Ubuntu\\\", sans-serif;\\n font-size: 18px;\\n font-weight: 700;\\n letter-spacing: 0.05em;\\n color: #111111;\\n transition: color 0.3s ease;\\n}\\n\\n.purple-cta-button svg {\\n position: relative;\\n z-index: 1;\\n top: 0;\\n margin-left: 10px;\\n fill: none;\\n stroke: #111111;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n transform: translateX(-5px);\\n transition:\\n transform 0.3s ease,\\n stroke 0.3s ease;\\n}\\n\\n.purple-cta-button:hover::before {\\n width: 100%;\\n}\\n\\n.purple-cta-button:hover span {\\n color: #ffffff;\\n}\\n\\n.purple-cta-button:hover svg {\\n stroke: #ffffff;\\n transform: translateX(0);\\n}\\n\\n.purple-cta-button:active {\\n transform: scale(0.95);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .purple-cta-button,\\n .purple-cta-button::before,\\n .purple-cta-button span,\\n .purple-cta-button svg {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2230e0f-c9fe-4608-b372-11ff231a6e6b","type":"divider","props":{},"children":[]},{"id":"35a82e94-f38c-4e32-87f2-16f0ec86c7f9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"51bc6e7e-8ab7-4019-a672-e5369f995d85","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The HTML uses one button, one text span, and one SVG arrow.","styles":{}}],"children":[]},{"id":"8d27ee8a-f6fc-4b08-a572-3a7d71ec674d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"fwgkbba08\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6ecddae3-fc9d-481f-a8e8-f026438de12e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is the main hover target.\n\nThe span controls the text color.\n\nThe SVG controls the arrow stroke color and movement.","styles":{}}],"children":[]},{"id":"34568a80-e461-4741-bb14-e1650a265d5b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"e7a32281-a6b8-449c-9f20-ca3bc0ba1c30","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper centers the button in the viewport.","styles":{}}],"children":[]},{"id":"0462ecc6-d142-4db6-836a-f50d68a10163","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"86mzfzm41\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5b7c38f6-56c2-4476-9bf8-35e5984739c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Container","styles":{}}],"children":[]},{"id":"76e83de1-47c1-4750-b1d6-f5049358ef74","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" because the purple fill is placed behind the text using ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"0b82c121-5e9f-48d1-a368-529d112f08f4","type":"procode","props":{"code":".purple-cta-button {\n position: relative;\n isolation: isolate;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jwa4z3y5b\",\"name\":\"code\",\"code\":\".purple-cta-button {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56b4cb76-998b-4ded-b7b7-d8687728bfa3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"isolation: isolate","styles":{"code":true}},{"type":"text","text":" keeps the negative ","styles":{}},{"type":"text","text":"z-index","styles":{"code":true}},{"type":"text","text":" fill layer inside the button stacking context.","styles":{}}],"children":[]},{"id":"7e75aa2d-0427-4c66-87a0-41f2915f8bcc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Fill Layer","styles":{}}],"children":[]},{"id":"be3e628c-b8cf-4b7c-85e7-19ed4d0bcf54","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The purple background is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1dfe7a57-6285-48c7-9fc3-f3b570e1b81b","type":"procode","props":{"code":".purple-cta-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n width: 45px;\n height: 45px;\n border-radius: 50px;\n background: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2nfz3g7ky\",\"name\":\"code\",\"code\":\".purple-cta-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: 0;\\n left: 0;\\n z-index: -1;\\n width: 45px;\\n height: 45px;\\n border-radius: 50px;\\n background: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6aad847c-586f-458b-a483-376ee4b2b271","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default state: the purple shape is only a small circle behind the left side of the button.","styles":{}}],"children":[]},{"id":"686872eb-23d7-424f-95d4-b84940c24c63","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Flow","styles":{}}],"children":[]},{"id":"52769251-9750-4fde-a4d3-6215b4e6e2fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the purple shape expands to the full button width.","styles":{}}],"children":[]},{"id":"9e80f027-d7a7-4f86-9b27-4f0d3307ccff","type":"procode","props":{"code":".purple-cta-button:hover::before {\n width: 100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6u4n4uvyh\",\"name\":\"code\",\"code\":\".purple-cta-button:hover::before {\\n width: 100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3637ad45-9416-4f34-823c-c7aad2c7cab6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the smooth background fill animation.","styles":{}}],"children":[]},{"id":"a5d51970-422a-4570-a07d-33a1e92b60fe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Color Flow","styles":{}}],"children":[]},{"id":"1d37803e-da97-4094-8fde-79f0199423f8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text is black by default.","styles":{}}],"children":[]},{"id":"ff5ea0a6-5866-41e0-8e46-05b6dcda9be5","type":"procode","props":{"code":".purple-cta-button span {\n color: #111111;\n}","language":"javascript","filename":"","files":"[{\"id\":\"a5legjwg0\",\"name\":\"code\",\"code\":\".purple-cta-button span {\\n color: #111111;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d64384d-0bc5-4dbe-aada-b7c2ef009733","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the purple background expands, the text changes to white.","styles":{}}],"children":[]},{"id":"dcde2e3e-84e4-460c-98ae-eccbe2a3e43a","type":"procode","props":{"code":".purple-cta-button:hover span {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vzqhig4ux\",\"name\":\"code\",\"code\":\".purple-cta-button:hover span {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"844895c8-3214-4631-92b3-c92d0beb54eb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Color Flow","styles":{}}],"children":[]},{"id":"820fd9fa-2472-446e-b842-7ea8ffe6b1d5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The arrow stroke is black by default.","styles":{}}],"children":[]},{"id":"bf6e00ef-b6b1-44c2-ac58-fe5e4f2a9ee9","type":"procode","props":{"code":".purple-cta-button svg {\n stroke: #111111;\n}","language":"javascript","filename":"","files":"[{\"id\":\"un907a1ss\",\"name\":\"code\",\"code\":\".purple-cta-button svg {\\n stroke: #111111;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"670a37fe-e5b8-480b-9dfc-49578913c236","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the arrow stroke changes to white.","styles":{}}],"children":[]},{"id":"f752d807-3aa9-4951-8bec-9b52ffaa0818","type":"procode","props":{"code":".purple-cta-button:hover svg {\n stroke: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"p2y9blx80\",\"name\":\"code\",\"code\":\".purple-cta-button:hover svg {\\n stroke: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fdad4d13-c9e4-4fea-a44e-2c106a71a2ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Movement","styles":{}}],"children":[]},{"id":"91507d46-d916-4217-b14b-8372fb993c96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The arrow starts slightly moved to the left.","styles":{}}],"children":[]},{"id":"168efc79-3853-4e3d-880d-52fae8d7f241","type":"procode","props":{"code":"transform: translateX(-5px);","language":"javascript","filename":"","files":"[{\"id\":\"sgfizav8t\",\"name\":\"code\",\"code\":\"transform: translateX(-5px);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0ff040d6-6951-4021-824f-9b47413befd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the arrow returns to its normal position.","styles":{}}],"children":[]},{"id":"81cf08e5-3fdb-49bc-8ffd-b98e61995459","type":"procode","props":{"code":".purple-cta-button:hover svg {\n transform: translateX(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3fylb37oc\",\"name\":\"code\",\"code\":\".purple-cta-button:hover svg {\\n transform: translateX(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07d2a87a-47ea-4486-806f-0fe50e57765d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press","styles":{}}],"children":[]},{"id":"c97a626a-de90-4dff-8790-47de02b9af69","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"3eb6cf24-8ff4-4621-ab70-6a6bedd7f047","type":"procode","props":{"code":".purple-cta-button:active {\n transform: scale(0.95);\n}","language":"javascript","filename":"","files":"[{\"id\":\"0jl7y0u0d\",\"name\":\"code\",\"code\":\".purple-cta-button:active {\\n transform: scale(0.95);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d51552c7-b655-40b2-bc56-1b1fd7a59885","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"0b2dc201-cb2e-4abb-b609-5f40c89c57bb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The media query removes transitions for users who prefer reduced motion.","styles":{}}],"children":[]},{"id":"a0368fe4-7cf6-44d9-9ede-e3425655a1ee","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .purple-cta-button,\n .purple-cta-button::before,\n .purple-cta-button span,\n .purple-cta-button svg {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"0a78d0b0h\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .purple-cta-button,\\n .purple-cta-button::before,\\n .purple-cta-button span,\\n .purple-cta-button svg {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"588ce684-0f74-40b5-bf4a-5121e446b89d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]