Arrow Underline Button

[{"id":"889b9aa9-d5c6-495c-92fa-ab86ce1470a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b6d42f08-bb66-4e7c-ac68-9a773e3c4a50","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.button-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.cta {\\n border: none;\\n background: none;\\n cursor: pointer;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0;\\n color: #000000;\\n}\\n\\n.cta span {\\n padding-bottom: 7px;\\n letter-spacing: 4px;\\n font-size: 14px;\\n line-height: 1;\\n padding-right: 15px;\\n text-transform: uppercase;\\n}\\n\\n.cta svg {\\n display: block;\\n flex-shrink: 0;\\n fill: currentColor;\\n transform: translateX(-8px) translateY(-4px);\\n transition: transform 0.3s ease;\\n}\\n\\n.cta:hover svg {\\n transform: translateX(0) translateY(-4px);\\n}\\n\\n.cta:active svg {\\n transform: translateX(0) translateY(-4px) scale(0.9);\\n}\\n\\n.hover-underline-animation {\\n position: relative;\\n color: black;\\n padding-bottom: 20px;\\n}\\n\\n.hover-underline-animation::after {\\n content: \\\"\\\";\\n position: absolute;\\n width: 100%;\\n transform: scaleX(0);\\n height: 2px;\\n bottom: 0;\\n left: 0;\\n background-color: #000000;\\n transform-origin: bottom right;\\n transition: transform 0.25s ease-out;\\n}\\n\\n.cta:hover .hover-underline-animation::after {\\n transform: scaleX(1);\\n transform-origin: bottom left;\\n}\\n\\n.cta:focus-visible {\\n outline: 2px solid #000000;\\n outline-offset: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .cta svg,\\n .hover-underline-animation::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Arrow Underline 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":"4ff618a1-aaf6-413e-847d-f6d0bf25826a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"89f2b26d-3acd-4757-8113-cbcf81918ba3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"079de101-b228-45d2-8ca4-6a03ddab2d3a","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b646d268-afad-43b4-ab4a-204407ee5122","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"167f90a8-dcbc-44c3-a745-3c5902ced099","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.button-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.cta {\\n border: none;\\n background: none;\\n cursor: pointer;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0;\\n color: #000000;\\n}\\n\\n.cta span {\\n padding-bottom: 7px;\\n letter-spacing: 4px;\\n font-size: 14px;\\n line-height: 1;\\n padding-right: 15px;\\n text-transform: uppercase;\\n}\\n\\n.cta svg {\\n display: block;\\n flex-shrink: 0;\\n fill: currentColor;\\n transform: translateX(-8px) translateY(-4px);\\n transition: transform 0.3s ease;\\n}\\n\\n.cta:hover svg {\\n transform: translateX(0) translateY(-4px);\\n}\\n\\n.cta:active svg {\\n transform: translateX(0) translateY(-4px) scale(0.9);\\n}\\n\\n.hover-underline-animation {\\n position: relative;\\n color: black;\\n padding-bottom: 20px;\\n}\\n\\n.hover-underline-animation::after {\\n content: \\\"\\\";\\n position: absolute;\\n width: 100%;\\n transform: scaleX(0);\\n height: 2px;\\n bottom: 0;\\n left: 0;\\n background-color: #000000;\\n transform-origin: bottom right;\\n transition: transform 0.25s ease-out;\\n}\\n\\n.cta:hover .hover-underline-animation::after {\\n transform: scaleX(1);\\n transform-origin: bottom left;\\n}\\n\\n.cta:focus-visible {\\n outline: 2px solid #000000;\\n outline-offset: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .cta svg,\\n .hover-underline-animation::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"181603cc-6212-4b39-834b-91701ae64950","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"875c2a35-4790-4a71-9b43-6e2ab6457fff","type":"divider","props":{},"children":[]},{"id":"029ea521-8876-4452-bd26-7725c55d4364","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"2a95736d-bc89-4ed7-9f9c-a076cdf61dd9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":" file is the main entry file. It loads the CSS first:","styles":{}}],"children":[]},{"id":"ca3d4bd4-fa94-4995-8c5a-e6593ef0fe6f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"nr1oq2rru\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1b5a93db-de39-4283-a285-7620470d5edc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then it renders one centered button inside the page wrapper:","styles":{}}],"children":[]},{"id":"f642a67a-daa8-4a01-945d-b22e62b135e4","type":"procode","props":{"code":"

\n \n

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

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58a704b7-666b-4d67-8e53-4384900dd523","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button has two visual parts:","styles":{}}],"children":[]},{"id":"53c50b46-61ea-44a6-85e0-d874b8db51ee","type":"procode","props":{"code":".hover-underline-animation = text and underline animation\nsvg = arrow icon","language":"javascript","filename":"","files":"[{\"id\":\"zryye5msk\",\"name\":\"code\",\"code\":\".hover-underline-animation = text and underline animation\\nsvg = arrow icon\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"787bc39c-73f1-4279-81b2-099105fe1601","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Flow\n\nThe ","styles":{}},{"type":"text","text":"/index.js","styles":{"code":true}},{"type":"text","text":" file only runs a console test:","styles":{}}],"children":[]},{"id":"4c50ed2c-fb72-4a4b-ab2d-12b334e6d931","type":"procode","props":{"code":"console.log(\"Hello Vanilla!\");","language":"javascript","filename":"","files":"[{\"id\":\"qzcjd9rxe\",\"name\":\"code\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e028059-1005-4c2d-9a45-a348269f1b5b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button animation does not depend on JavaScript. All movement is handled by CSS.","styles":{}}],"children":[]},{"id":"9b77e8a7-4e6c-458a-8528-afb23a52da98","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style Flow\n\nThe ","styles":{}},{"type":"text","text":"/styles.css","styles":{"code":true}},{"type":"text","text":" file controls the layout, underline animation, arrow movement, active state, and focus state.","styles":{}}],"children":[]},{"id":"e820243a-6125-4613-9b25-62494e85a69f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Base Reset\n\nThe universal selector keeps the layout sizing stable.","styles":{}}],"children":[]},{"id":"47e931dc-ade1-48b6-ae90-5f616511e5d1","type":"procode","props":{"code":"* {\n box-sizing: border-box;\n}","language":"javascript","filename":"","files":"[{\"id\":\"d3rwa1yu6\",\"name\":\"code\",\"code\":\"* {\\n box-sizing: border-box;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a4aaf51-d0b1-41f3-96b9-75ae145f83dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Body Flow\n\nThe body removes default spacing, uses a white background, and fills the viewport height.","styles":{}}],"children":[]},{"id":"d7cb02f1-06c4-4bcb-a3d5-677c44415266","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #ffffff;\n font-family: Arial, Helvetica, sans-serif;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s241pjs60\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c12fd316-6c32-4dae-b82d-bfee2f34337a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center Flow\n\nThe ","styles":{}},{"type":"text","text":".button-page","styles":{"code":true}},{"type":"text","text":" wrapper centers the button vertically and horizontally.","styles":{}}],"children":[]},{"id":"519e3115-d490-4fc9-b225-7fef76867b8a","type":"procode","props":{"code":".button-page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"exuo9cxa1\",\"name\":\"code\",\"code\":\".button-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":"1415bc0f-d567-4737-97cf-9f9cfa906b85","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Flow\n\nThe ","styles":{}},{"type":"text","text":".cta","styles":{"code":true}},{"type":"text","text":" button removes default button styling and uses ","styles":{}},{"type":"text","text":"inline-flex","styles":{"code":true}},{"type":"text","text":" so the text and arrow sit in one row.","styles":{}}],"children":[]},{"id":"db5edb3c-9e98-4d31-975f-1cc769358ccb","type":"procode","props":{"code":".cta {\n border: none;\n background: none;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n color: #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"u2g0teco9\",\"name\":\"code\",\"code\":\".cta {\\n border: none;\\n background: none;\\n cursor: pointer;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0;\\n color: #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6320504f-cf8b-4f1d-b7e5-0680f484e85e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Flow\n\nThe text is uppercase with letter spacing.","styles":{}}],"children":[]},{"id":"b1d1eb82-e8e0-432a-a531-d6cce217aaca","type":"procode","props":{"code":".cta span {\n padding-bottom: 7px;\n letter-spacing: 4px;\n font-size: 14px;\n line-height: 1;\n padding-right: 15px;\n text-transform: uppercase;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6qbsz5e1r\",\"name\":\"code\",\"code\":\".cta span {\\n padding-bottom: 7px;\\n letter-spacing: 4px;\\n font-size: 14px;\\n line-height: 1;\\n padding-right: 15px;\\n text-transform: uppercase;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7badb6c5-2392-44bf-a9e3-1b8bdc65731b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Center Flow\n\nThe arrow is moved left by default and lifted upward with ","styles":{}},{"type":"text","text":"translateY(-4px)","styles":{"code":true}},{"type":"text","text":" so it aligns better with the text height.","styles":{}}],"children":[]},{"id":"c8431095-006b-4203-a6af-5fd9311e3751","type":"procode","props":{"code":".cta svg {\n display: block;\n flex-shrink: 0;\n fill: currentColor;\n transform: translateX(-8px) translateY(-4px);\n transition: transform 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qvjkqj5yk\",\"name\":\"code\",\"code\":\".cta svg {\\n display: block;\\n flex-shrink: 0;\\n fill: currentColor;\\n transform: translateX(-8px) translateY(-4px);\\n transition: transform 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cee41c8c-465e-4bfd-84aa-14044bc43e94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Arrow Flow\n\nOn hover, the arrow moves horizontally into place while keeping the same vertical alignment.","styles":{}}],"children":[]},{"id":"d94a799f-a778-424f-a93f-b6d8f5df9db1","type":"procode","props":{"code":".cta:hover svg {\n transform: translateX(0) translateY(-4px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"4sg2v7t15\",\"name\":\"code\",\"code\":\".cta:hover svg {\\n transform: translateX(0) translateY(-4px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"349eebf1-600a-456c-9007-6f161fe403bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Arrow Flow\n\nWhen clicked, the arrow scales down slightly. The ","styles":{}},{"type":"text","text":"translateY(-4px)","styles":{"code":true}},{"type":"text","text":" is still preserved so the arrow does not jump vertically.","styles":{}}],"children":[]},{"id":"13af1ec6-aab0-4438-932e-f8baa071c8b1","type":"procode","props":{"code":".cta:active svg {\n transform: translateX(0) translateY(-4px) scale(0.9);\n}","language":"javascript","filename":"","files":"[{\"id\":\"6zloq26cg\",\"name\":\"code\",\"code\":\".cta:active svg {\\n transform: translateX(0) translateY(-4px) scale(0.9);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da0a6203-a3ef-45c3-875f-d43356f7bdbb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Underline Base Flow\n\nThe text span uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" so the underline can be placed under it.","styles":{}}],"children":[]},{"id":"ae81c5bf-8501-474b-9839-90abfa21a73d","type":"procode","props":{"code":".hover-underline-animation {\n position: relative;\n color: black;\n padding-bottom: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7kbyl1djv\",\"name\":\"code\",\"code\":\".hover-underline-animation {\\n position: relative;\\n color: black;\\n padding-bottom: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30ae9b61-e95f-4402-a4ba-7e35fae61919","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Underline Hidden State\n\nThe underline is created with ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":". It starts hidden using ","styles":{}},{"type":"text","text":"scaleX(0)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"0b485e8a-422c-490a-add9-2bdfddf485e0","type":"procode","props":{"code":".hover-underline-animation::after {\n content: \"\";\n position: absolute;\n width: 100%;\n transform: scaleX(0);\n height: 2px;\n bottom: 0;\n left: 0;\n background-color: #000000;\n transform-origin: bottom right;\n transition: transform 0.25s ease-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vxrc18r8g\",\"name\":\"code\",\"code\":\".hover-underline-animation::after {\\n content: \\\"\\\";\\n position: absolute;\\n width: 100%;\\n transform: scaleX(0);\\n height: 2px;\\n bottom: 0;\\n left: 0;\\n background-color: #000000;\\n transform-origin: bottom right;\\n transition: transform 0.25s ease-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8186f1be-15f0-4639-adea-9812d03418c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Underline Hover Flow\n\nOn hover, the underline expands from left to right.","styles":{}}],"children":[]},{"id":"1a6df0df-f639-40a0-9ef0-f42b98cd4bfd","type":"procode","props":{"code":".cta:hover .hover-underline-animation::after {\n transform: scaleX(1);\n transform-origin: bottom left;\n}","language":"javascript","filename":"","files":"[{\"id\":\"v4jq89pne\",\"name\":\"code\",\"code\":\".cta:hover .hover-underline-animation::after {\\n transform: scaleX(1);\\n transform-origin: bottom left;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"224240cc-6443-4b21-8719-b6eafbaa2e00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Flow\n\nKeyboard users get a visible outline.","styles":{}}],"children":[]},{"id":"64acd758-3269-46bd-80c8-fbc3d330788b","type":"procode","props":{"code":".cta:focus-visible {\n outline: 2px solid #000000;\n outline-offset: 8px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"apzqh69zw\",\"name\":\"code\",\"code\":\".cta:focus-visible {\\n outline: 2px solid #000000;\\n outline-offset: 8px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"670f42f9-1379-4dc3-b02f-59b6ee66b591","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow\n\nIf the user prefers reduced motion, the transitions are disabled.","styles":{}}],"children":[]},{"id":"a04a0389-afb1-478e-8b43-9541c2ece454","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .cta svg,\n .hover-underline-animation::after {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"7d2ydpw7j\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .cta svg,\\n .hover-underline-animation::after {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5cff1747-b9db-4d16-8c49-c8367b1bb441","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]