From Pill To Box Arrow Button

[{"id":"bd3beb4b-bc7b-4e4b-bece-e4d0ba3ef922","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"10424e75-3a2d-4e45-96fc-b6a672032f38","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 display: grid;\\n place-items: center;\\n background: #f3f4f6;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.liquid-arrow-btn {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 4px;\\n\\n padding: 12px 32px;\\n border: 1.5px solid rgba(51, 51, 51, 0.4);\\n border-radius: 50px;\\n\\n background: transparent;\\n color: #111111;\\n\\n font-size: 14px;\\n font-weight: 600;\\n\\n overflow: hidden;\\n cursor: pointer;\\n -webkit-tap-highlight-color: transparent;\\n\\n transition:\\n color 500ms cubic-bezier(0.23, 1, 0.32, 1),\\n border-color 500ms cubic-bezier(0.23, 1, 0.32, 1),\\n border-radius 500ms cubic-bezier(0.23, 1, 0.32, 1),\\n transform 150ms ease;\\n}\\n\\n.liquid-arrow-btn:hover {\\n color: #ffffff;\\n border-color: transparent;\\n border-radius: 12px;\\n}\\n\\n.liquid-arrow-btn:active {\\n transform: scale(0.95);\\n}\\n\\n.flow-label {\\n position: relative;\\n z-index: 2;\\n\\n transform: translateX(-12px);\\n\\n transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.liquid-arrow-btn:hover .flow-label {\\n transform: translateX(12px);\\n}\\n\\n.flow-fill {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n z-index: 1;\\n\\n width: 16px;\\n height: 16px;\\n\\n border-radius: 50%;\\n background: #111111;\\n opacity: 0;\\n\\n transform: translate(-50%, -50%);\\n\\n transition:\\n width 600ms cubic-bezier(0.19, 1, 0.22, 1),\\n height 600ms cubic-bezier(0.19, 1, 0.22, 1),\\n border-radius 500ms cubic-bezier(0.23, 1, 0.32, 1),\\n opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);\\n}\\n\\n.liquid-arrow-btn:hover .flow-fill {\\n width: 260px;\\n height: 260px;\\n border-radius: 12px;\\n opacity: 1;\\n}\\n\\n.flow-icon {\\n position: absolute;\\n z-index: 3;\\n\\n width: 16px;\\n height: 16px;\\n\\n fill: none;\\n stroke: #111111;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n\\n transition:\\n left 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n right 600ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n stroke 500ms cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.flow-icon-left {\\n left: -25%;\\n}\\n\\n.flow-icon-right {\\n right: 16px;\\n}\\n\\n.liquid-arrow-btn:hover .flow-icon-left {\\n left: 16px;\\n stroke: #ffffff;\\n}\\n\\n.liquid-arrow-btn:hover .flow-icon-right {\\n right: -25%;\\n stroke: #ffffff;\\n}\\n\\n.liquid-arrow-btn:focus-visible {\\n outline: 2px solid #111111;\\n outline-offset: 4px;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n From Pill To Box Arrow Button\\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":"119b52b8-1c83-44d9-bb82-2cb6a37e9319","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d6e310d0-2ea6-4460-acb5-473b10b36cc2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"2c9631a7-c7e9-4129-8d33-a0f85cb70269","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cbce5baa-a503-4c2e-9a6d-4f922ec6958e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"6c0d2f56-592e-49ca-a103-34b22c24dfb0","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 display: grid;\\n place-items: center;\\n background: #f3f4f6;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.liquid-arrow-btn {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 4px;\\n\\n padding: 12px 32px;\\n border: 1.5px solid rgba(51, 51, 51, 0.4);\\n border-radius: 999px;\\n\\n background: transparent;\\n color: #111111;\\n\\n font-size: 14px;\\n font-weight: 600;\\n\\n overflow: hidden;\\n cursor: pointer;\\n\\n transition:\\n color 600ms cubic-bezier(0.23, 1, 0.32, 1),\\n border-color 600ms cubic-bezier(0.23, 1, 0.32, 1),\\n border-radius 600ms cubic-bezier(0.23, 1, 0.32, 1),\\n transform 180ms ease;\\n}\\n\\n.liquid-arrow-btn:hover {\\n color: #ffffff;\\n border-color: transparent;\\n border-radius: 12px;\\n}\\n\\n.liquid-arrow-btn:active {\\n transform: scale(0.95);\\n}\\n\\n.flow-label {\\n position: relative;\\n z-index: 2;\\n\\n transform: translateX(-12px);\\n\\n transition: transform 800ms ease-out;\\n}\\n\\n.liquid-arrow-btn:hover .flow-label {\\n transform: translateX(12px);\\n}\\n\\n.flow-fill {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n z-index: 1;\\n\\n width: 16px;\\n height: 16px;\\n\\n border-radius: 999px;\\n background: #111111;\\n opacity: 0;\\n\\n transform: translate(-50%, -50%);\\n\\n transition:\\n width 800ms cubic-bezier(0.19, 1, 0.22, 1),\\n height 800ms cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 800ms cubic-bezier(0.19, 1, 0.22, 1);\\n}\\n\\n.liquid-arrow-btn:hover .flow-fill {\\n width: 220px;\\n height: 220px;\\n opacity: 1;\\n}\\n\\n.flow-icon {\\n position: absolute;\\n z-index: 3;\\n\\n width: 16px;\\n height: 16px;\\n\\n fill: none;\\n stroke: #111111;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n\\n transition:\\n left 800ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n right 800ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n stroke 800ms cubic-bezier(0.34, 1.56, 0.64, 1);\\n}\\n\\n.flow-icon-left {\\n left: -25%;\\n}\\n\\n.flow-icon-right {\\n right: 16px;\\n}\\n\\n.liquid-arrow-btn:hover .flow-icon-left {\\n left: 16px;\\n stroke: #ffffff;\\n}\\n\\n.liquid-arrow-btn:hover .flow-icon-right {\\n right: -25%;\\n stroke: #ffffff;\\n}\\n\\n.liquid-arrow-btn:focus-visible {\\n outline: 2px solid #111111;\\n outline-offset: 4px;\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"34337d3f-4141-4cf2-af1f-a1aefd3c7bf7","type":"divider","props":{},"children":[]},{"id":"6a612fc2-452f-41d5-ab78-1ac959eed7b2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"05f4cd74-9fdf-47cf-84bf-844202ef14a1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\n\nThis component creates a pill-style arrow button. On hover, the button changes from a rounded pill into a softer box shape, the dark fill expands from the center, the text slides to the right, and the arrow moves from the right side to the left side.","styles":{}}],"children":[]},{"id":"e0184246-8e9f-42f4-bf20-6779642e8134","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"ee4059e6-f8c1-4fdf-a1a0-60d5e316e53c","type":"procode","props":{"code":"Button\n├── left arrow icon\n├── label text\n├── center fill layer\n└── right arrow icon","language":"javascript","filename":"","files":"[{\"id\":\"k3ctgaaos\",\"name\":\"code\",\"code\":\"Button\\n├── left arrow icon\\n├── label text\\n├── center fill layer\\n└── right arrow icon\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"23881a8d-d928-4e4e-8a8f-388b9bcbeaa3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"c0d0c0ee-bf77-47d0-a430-21aace224f29","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"552c19umh\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1ff0c8ce-2ea2-4945-8097-53ed6e9b6a70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses two arrow icons.","styles":{}}],"children":[]},{"id":"b165e33f-51a9-40a3-8b4c-33047299b437","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The left arrow starts outside the button.","styles":{}}],"children":[]},{"id":"8b436b77-4e11-4ea4-abca-1f39bd5be3a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The right arrow starts visible inside the button.","styles":{}}],"children":[]},{"id":"53ea862d-5169-4871-89ea-df01fbf386bf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"flow-fill","styles":{"code":true}},{"type":"text","text":" span is the animated black fill layer.","styles":{}}],"children":[]},{"id":"028343af-d581-4d0e-b6d9-538089c8aebe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Page Layout Flow","styles":{}}],"children":[]},{"id":"22aa492e-cb93-40c8-8015-5283f391e0b2","type":"procode","props":{"code":"body {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bo02bzsrm\",\"name\":\"code\",\"code\":\"body {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d661c70-652a-4fc7-88f9-d017edc81519","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The body centers the button vertically and horizontally.","styles":{}}],"children":[]},{"id":"58b84a18-81d7-4d37-8a88-81f5a4b237db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base Flow","styles":{}}],"children":[]},{"id":"1be650b7-6f45-4a47-8caf-a023a301de90","type":"procode","props":{"code":".liquid-arrow-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 12px 32px;\n border-radius: 50px;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vou4zvuav\",\"name\":\"code\",\"code\":\".liquid-arrow-btn {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n padding: 12px 32px;\\n border-radius: 50px;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7acd333-a909-496d-8985-74c8a6c73908","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":" so the fill and arrow icons can be positioned inside it.","styles":{}}],"children":[]},{"id":"95ed32c9-49fa-470a-8a4a-94178c836eee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the expanding fill clipped inside the button shape.","styles":{}}],"children":[]},{"id":"6fa50fde-9703-442c-a53b-70d1bc876aa9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Button State","styles":{}}],"children":[]},{"id":"b7d19fc8-b1ff-4daf-93c0-9cf98732b6b3","type":"procode","props":{"code":"background: transparent\nborder: gray\nshape: pill\ntext: black\nright arrow: visible\nleft arrow: hidden outside\nfill circle: hidden in center","language":"javascript","filename":"","files":"[{\"id\":\"swu9q3i0w\",\"name\":\"code\",\"code\":\"background: transparent\\nborder: gray\\nshape: pill\\ntext: black\\nright arrow: visible\\nleft arrow: hidden outside\\nfill circle: hidden in center\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c947974b-dffb-48ed-8a11-925f13250e42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Button Flow","styles":{}}],"children":[]},{"id":"20ca3b8a-7701-47d2-b1f3-c9dd71ac227b","type":"procode","props":{"code":".liquid-arrow-btn:hover {\n color: #ffffff;\n border-color: transparent;\n border-radius: 12px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"i75wkjn5y\",\"name\":\"code\",\"code\":\".liquid-arrow-btn:hover {\\n color: #ffffff;\\n border-color: transparent;\\n border-radius: 12px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2a1ec7d8-828b-4e9b-a2bf-934014b2f875","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the text becomes white, the border disappears, and the shape changes from pill to rounded box.","styles":{}}],"children":[]},{"id":"8d44c155-fb45-4d7b-b5e6-9d622de7e012","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Layer Flow","styles":{}}],"children":[]},{"id":"c0048fd5-9a4a-4879-b140-46424b6d6339","type":"procode","props":{"code":".flow-fill {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #111111;\n opacity: 0;\n transform: translate(-50%, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"n9ckks8n6\",\"name\":\"code\",\"code\":\".flow-fill {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 16px;\\n height: 16px;\\n border-radius: 50%;\\n background: #111111;\\n opacity: 0;\\n transform: translate(-50%, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"603eff17-95d1-497f-978e-e171abf0f51c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The fill starts as a small hidden circle in the center of the button.","styles":{}}],"children":[]},{"id":"e23edbd2-4dd0-43c5-9160-18e503ab5f94","type":"procode","props":{"code":".liquid-arrow-btn:hover .flow-fill {\n width: 260px;\n height: 260px;\n border-radius: 12px;\n opacity: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1hvlg98p9\",\"name\":\"code\",\"code\":\".liquid-arrow-btn:hover .flow-fill {\\n width: 260px;\\n height: 260px;\\n border-radius: 12px;\\n opacity: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93d728d2-36da-4f36-bdea-39822da57c96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the fill expands until it covers the whole button.","styles":{}}],"children":[]},{"id":"d0633a72-e3d7-478a-a2c4-ff9a92d4014a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Animation Flow","styles":{}}],"children":[]},{"id":"89797c38-dff1-4658-9d7a-7bd51593dd73","type":"procode","props":{"code":"Small hidden circle\n↓\nHover\n↓\nCircle grows bigger\n↓\nFill covers button\n↓\nFill changes into rounded box shape","language":"javascript","filename":"","files":"[{\"id\":\"zsjfgv93b\",\"name\":\"code\",\"code\":\"Small hidden circle\\n↓\\nHover\\n↓\\nCircle grows bigger\\n↓\\nFill covers button\\n↓\\nFill changes into rounded box shape\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9405d6f-2e69-4fbe-8305-a2c077e7e185","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Flow","styles":{}}],"children":[]},{"id":"9c59dc68-ed1e-4004-b091-f65a55146308","type":"procode","props":{"code":".flow-label {\n position: relative;\n z-index: 2;\n transform: translateX(-12px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rlsd97796\",\"name\":\"code\",\"code\":\".flow-label {\\n position: relative;\\n z-index: 2;\\n transform: translateX(-12px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"10e0649e-a16c-4d51-b3fc-87e8ef70dec7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The label starts slightly shifted to the left.","styles":{}}],"children":[]},{"id":"f0f3884a-bd1e-4caa-b054-e2fad2b5f088","type":"procode","props":{"code":".liquid-arrow-btn:hover .flow-label {\n transform: translateX(12px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"o34utbl5b\",\"name\":\"code\",\"code\":\".liquid-arrow-btn:hover .flow-label {\\n transform: translateX(12px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e48ff15-d299-482f-a01e-f019e6d5fd8a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the label moves to the right.","styles":{}}],"children":[]},{"id":"91713c2c-c522-4380-98fa-9ec44ef75d6a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Flow","styles":{}}],"children":[]},{"id":"ddbbf362-7ffd-4cc6-b32f-b797960a4a61","type":"procode","props":{"code":".flow-icon-left {\n left: -25%;\n}\n\n.flow-icon-right {\n right: 16px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dkkri38dx\",\"name\":\"code\",\"code\":\".flow-icon-left {\\n left: -25%;\\n}\\n\\n.flow-icon-right {\\n right: 16px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5dd59aa0-1307-4d3d-984f-977306f6cf00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default icon state:","styles":{}}],"children":[]},{"id":"297ad83b-dac5-42a3-b28f-b52271c3f9cb","type":"procode","props":{"code":"left arrow: outside button\nright arrow: inside button","language":"javascript","filename":"","files":"[{\"id\":\"bf9c7mwun\",\"name\":\"code\",\"code\":\"left arrow: outside button\\nright arrow: inside button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"babfedbc-7bec-4e2e-bdd9-ee3954275829","type":"procode","props":{"code":".liquid-arrow-btn:hover .flow-icon-left {\n left: 16px;\n stroke: #ffffff;\n}\n\n.liquid-arrow-btn:hover .flow-icon-right {\n right: -25%;\n stroke: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"3mvpj0k13\",\"name\":\"code\",\"code\":\".liquid-arrow-btn:hover .flow-icon-left {\\n left: 16px;\\n stroke: #ffffff;\\n}\\n\\n.liquid-arrow-btn:hover .flow-icon-right {\\n right: -25%;\\n stroke: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da803bc6-224e-4479-9405-fc39e4607c85","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover icon state:","styles":{}}],"children":[]},{"id":"b321296b-717a-4384-ab40-c728246a8c7d","type":"procode","props":{"code":"left arrow: moves into button\nright arrow: moves out of button","language":"javascript","filename":"","files":"[{\"id\":\"kpm1yw8xb\",\"name\":\"code\",\"code\":\"left arrow: moves into button\\nright arrow: moves out of button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca3becf7-57f9-4bba-94fa-b06fb6379779","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layer Flow","styles":{}}],"children":[]},{"id":"113c3a94-b23d-4a35-9917-72070960aeb4","type":"procode","props":{"code":"z-index: 3 → arrow icons\nz-index: 2 → text label\nz-index: 1 → expanding fill\nbutton bg → transparent","language":"javascript","filename":"","files":"[{\"id\":\"z4rvefm28\",\"name\":\"code\",\"code\":\"z-index: 3 → arrow icons\\nz-index: 2 → text label\\nz-index: 1 → expanding fill\\nbutton bg → transparent\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e350a5b9-bb7a-44f8-aea7-52f78c5580d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The fill stays behind the text and icons.\n\nThe icons stay on top so the arrow remains visible during the transition.","styles":{}}],"children":[]},{"id":"49929dd3-99c4-4a70-afeb-7db10241e602","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Full Hover Animation Flow","styles":{}}],"children":[]},{"id":"5ceaf3a3-b439-47dd-a41a-601d864429de","type":"procode","props":{"code":"Default\n↓\nTransparent pill button\n↓\nBlack text and right arrow visible\n↓\nUser hovers\n↓\nBlack fill expands from center\n↓\nButton shape changes from pill to box\n↓\nText slides right\n↓\nLeft arrow enters from left\n↓\nRight arrow exits to right\n↓\nText and arrow become white","language":"javascript","filename":"","files":"[{\"id\":\"hdlsljii3\",\"name\":\"code\",\"code\":\"Default\\n↓\\nTransparent pill button\\n↓\\nBlack text and right arrow visible\\n↓\\nUser hovers\\n↓\\nBlack fill expands from center\\n↓\\nButton shape changes from pill to box\\n↓\\nText slides right\\n↓\\nLeft arrow enters from left\\n↓\\nRight arrow exits to right\\n↓\\nText and arrow become white\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a5cbd964-42db-43a3-b148-64d416fa7b46","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"f5fac3d4-6afe-4cec-b851-19640f18dc54","type":"procode","props":{"code":".liquid-arrow-btn:active {\n transform: scale(0.95);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rstwmna1i\",\"name\":\"code\",\"code\":\".liquid-arrow-btn:active {\\n transform: scale(0.95);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2dade62c-8818-43ec-8dfe-c2571c68c299","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"eb31b3df-4dfd-4e9c-91d7-6b5e352893c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Flow","styles":{}}],"children":[]},{"id":"c35c8470-3731-4cbb-b69a-feda4aaea32c","type":"procode","props":{"code":".liquid-arrow-btn:focus-visible {\n outline: 2px solid #111111;\n outline-offset: 4px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"usjdv36on\",\"name\":\"code\",\"code\":\".liquid-arrow-btn:focus-visible {\\n outline: 2px solid #111111;\\n outline-offset: 4px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1ac1d760-1189-4641-82eb-c4713ea03335","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Keyboard focus shows an outline outside the button.","styles":{}}],"children":[]},{"id":"014039e2-8794-4dbd-b22f-b4d9a5e39651","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]