Black Back To Top Button

[{"id":"dacd4b34-cbe2-429e-b9ba-d929c22b7b20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f703fa8b-63a1-44b1-bafb-07c3294a762f","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #000000;\\n --button-hover-bg: #111111;\\n --button-text: #ffffff;\\n --button-shadow: rgba(0, 0, 0, 0.16);\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--page-bg);\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button {\\n width: 50px;\\n height: 50px;\\n border-radius: 50%;\\n background-color: var(--button-bg);\\n border: none;\\n font-weight: 600;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0px 0px 0px 4px var(--button-shadow);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n overflow: hidden;\\n position: relative;\\n -webkit-tap-highlight-color: transparent;\\n outline: none;\\n}\\n\\n.button:active {\\n transform: scale(0.93);\\n transition-duration: 0.1s;\\n}\\n\\n.button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 4px;\\n}\\n\\n.svgIcon {\\n width: 12px;\\n transition-duration: 0.3s;\\n}\\n\\n.svgIcon path {\\n fill: var(--button-text);\\n}\\n\\n.button:hover {\\n width: 140px;\\n border-radius: 50px;\\n transition-duration: 0.3s;\\n background-color: var(--button-hover-bg);\\n align-items: center;\\n}\\n\\n.button:hover .svgIcon {\\n transition-duration: 0.3s;\\n transform: translateY(-200%);\\n}\\n\\n.button::before {\\n position: absolute;\\n bottom: -20px;\\n content: \\\"Back to Top\\\";\\n color: var(--button-text);\\n font-size: 0px;\\n}\\n\\n.button:hover::before {\\n font-size: 13px;\\n opacity: 1;\\n bottom: unset;\\n transition-duration: 0.3s;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button,\\n .svgIcon,\\n .button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Black Back To Top 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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"ae220c7a-5d1d-4253-9363-a235d3270c3a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"e2bfd503-98f9-4997-9f5c-260d8b51f0ea","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"686acc0e-e10e-43d3-aff1-075d716e4023","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"827e12d4-5ab9-408d-b7f5-db2ac01a945b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #000000;\\n --button-hover-bg: #111111;\\n --button-text: #ffffff;\\n --button-shadow: rgba(0, 0, 0, 0.16);\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--page-bg);\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button {\\n width: 50px;\\n height: 50px;\\n border-radius: 50%;\\n background-color: var(--button-bg);\\n border: none;\\n font-weight: 600;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0px 0px 0px 4px var(--button-shadow);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n overflow: hidden;\\n position: relative;\\n -webkit-tap-highlight-color: transparent;\\n outline: none;\\n}\\n\\n.button:active {\\n transform: scale(0.93);\\n transition-duration: 0.1s;\\n}\\n\\n.button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 4px;\\n}\\n\\n.svgIcon {\\n width: 12px;\\n transition-duration: 0.3s;\\n}\\n\\n.svgIcon path {\\n fill: var(--button-text);\\n}\\n\\n.button:hover {\\n width: 140px;\\n border-radius: 50px;\\n transition-duration: 0.3s;\\n background-color: var(--button-hover-bg);\\n align-items: center;\\n}\\n\\n.button:hover .svgIcon {\\n transition-duration: 0.3s;\\n transform: translateY(-200%);\\n}\\n\\n.button::before {\\n position: absolute;\\n bottom: -20px;\\n content: \\\"Back to Top\\\";\\n color: var(--button-text);\\n font-size: 0px;\\n}\\n\\n.button:hover::before {\\n font-size: 13px;\\n opacity: 1;\\n bottom: unset;\\n transition-duration: 0.3s;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button,\\n .svgIcon,\\n .button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a4f8565-8572-45ec-9146-566262d7ec8e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"dbe59a4e-b7a3-4ccc-92ed-11a0b8d8bed1","type":"divider","props":{},"children":[]},{"id":"e407fc13-2cd4-4ce7-9cb3-5685a1dfb546","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"7ed2c183-4ebc-4bf9-9570-b4b7f5ad126d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\nThis component creates a circular black back-to-top button. On hover, the button expands into a pill, the arrow icon moves upward, and the ","styles":{}},{"type":"text","text":"Back to Top","styles":{"code":true}},{"type":"text","text":" text appears inside the button.","styles":{}}],"children":[]},{"id":"cb0624bc-218b-450e-a3d6-b345cbc5437a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"04aeb744-293c-43d4-9fdd-69580e4f1d3b","type":"procode","props":{"code":"Page\n└── button.button\n ├── ::before text layer\n └── svg.svgIcon\n └── arrow path","language":"javascript","filename":"","files":"[{\"id\":\"i05g0r491\",\"name\":\"code\",\"code\":\"Page\\n└── button.button\\n ├── ::before text layer\\n └── svg.svgIcon\\n └── arrow path\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1adcf833-f573-4346-8f27-5dc37a197a47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"40ed22bf-9457-4fe3-9772-704eef1cd528","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"u1ob1wmnl\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"045890da-0d53-48ff-b9af-04c130531fc3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button contains only the SVG arrow icon.","styles":{}}],"children":[]},{"id":"595c3e5e-acf3-45e1-81e2-8e0c142d5874","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The visible text ","styles":{}},{"type":"text","text":"Back to Top","styles":{"code":true}},{"type":"text","text":" is created from CSS using ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8d431d9d-a541-47d9-888d-4f45bbf453ee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout Flow","styles":{}}],"children":[]},{"id":"526f23f6-2b85-4b76-9319-e67f2f3608c1","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"256so70k0\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4118ceb1-a121-41ea-b6ce-2add73211324","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":" class centers the button horizontally and vertically.","styles":{}}],"children":[]},{"id":"a4988d93-7f2f-4120-9091-08d81a8477a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Variable Flow","styles":{}}],"children":[]},{"id":"bad6d279-5319-48f5-997c-c960c3380ec2","type":"procode","props":{"code":":root {\n --page-bg: #ffffff;\n --button-bg: #000000;\n --button-hover-bg: #111111;\n --button-text: #ffffff;\n --button-shadow: rgba(0, 0, 0, 0.16);\n}","language":"javascript","filename":"","files":"[{\"id\":\"lk2qh5qwh\",\"name\":\"code\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #000000;\\n --button-hover-bg: #111111;\\n --button-text: #ffffff;\\n --button-shadow: rgba(0, 0, 0, 0.16);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"89aeabd5-e526-4755-b38e-2cfa49ea77e9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"These variables control the page background, button color, hover color, text color, and outer shadow.","styles":{}}],"children":[]},{"id":"5e7c1347-64c7-441b-89ee-d2fdff1338e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base Flow","styles":{}}],"children":[]},{"id":"a67328ea-1db8-43f4-a365-17d1fcaaca10","type":"procode","props":{"code":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: var(--button-bg);\n overflow: hidden;\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"83bpdaafw\",\"name\":\"code\",\"code\":\".button {\\n width: 50px;\\n height: 50px;\\n border-radius: 50%;\\n background-color: var(--button-bg);\\n overflow: hidden;\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f3eea42-2c4c-42ad-b05b-8265866944fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default state:","styles":{}}],"children":[]},{"id":"f787ea4d-ebcc-47d7-9c98-91811c90b4b7","type":"procode","props":{"code":"width: 50px\nheight: 50px\nshape: circle\nbackground: black\ncontent: arrow icon","language":"javascript","filename":"","files":"[{\"id\":\"5p07dk7dm\",\"name\":\"code\",\"code\":\"width: 50px\\nheight: 50px\\nshape: circle\\nbackground: black\\ncontent: arrow icon\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7d725544-f367-4d96-a50f-f1552b0709f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" makes the ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" text layer position inside the button.","styles":{}}],"children":[]},{"id":"963714b6-c417-413f-b8da-2f967af1815b","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":" clips the hidden text and moving icon.","styles":{}}],"children":[]},{"id":"f8fa669b-0ee2-4825-be85-6201ec852118","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Flow","styles":{}}],"children":[]},{"id":"aa622049-60e8-42bd-a536-d5a823184acb","type":"procode","props":{"code":".svgIcon {\n width: 12px;\n transition-duration: 0.3s;\n}\n\n.svgIcon path {\n fill: var(--button-text);\n}","language":"javascript","filename":"","files":"[{\"id\":\"clyguch8b\",\"name\":\"code\",\"code\":\".svgIcon {\\n width: 12px;\\n transition-duration: 0.3s;\\n}\\n\\n.svgIcon path {\\n fill: var(--button-text);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb9f7014-e180-4413-97f7-b044777adaf7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The arrow icon starts small at ","styles":{}},{"type":"text","text":"12px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"d956646b-6250-4fe0-a083-f61cfccb11c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The SVG path uses white from ","styles":{}},{"type":"text","text":"--button-text","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"d5a0b464-d07c-4601-88df-1fd3503c1b8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Text Flow","styles":{}}],"children":[]},{"id":"c590a2c5-2288-4d54-ba6f-f5de86bf75e5","type":"procode","props":{"code":".button::before {\n position: absolute;\n bottom: -20px;\n content: \"Back to Top\";\n color: var(--button-text);\n font-size: 0px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"b1cekfo23\",\"name\":\"code\",\"code\":\".button::before {\\n position: absolute;\\n bottom: -20px;\\n content: \\\"Back to Top\\\";\\n color: var(--button-text);\\n font-size: 0px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"467b7273-db36-4025-883d-95a36c1490f7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text starts below the button.","styles":{}}],"children":[]},{"id":"e1499fb0-75a1-40b8-b1ec-d5391de367a5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It also starts at ","styles":{}},{"type":"text","text":"font-size: 0px","styles":{"code":true}},{"type":"text","text":", so it is not visible in the default state.","styles":{}}],"children":[]},{"id":"a614d38b-f9cf-4867-922f-6dcb73514b55","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Button Flow","styles":{}}],"children":[]},{"id":"6b58fba3-cda5-4fb8-b338-e17fafaa199c","type":"procode","props":{"code":".button:hover {\n width: 140px;\n border-radius: 50px;\n background-color: var(--button-hover-bg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"xsjtgytu7\",\"name\":\"code\",\"code\":\".button:hover {\\n width: 140px;\\n border-radius: 50px;\\n background-color: var(--button-hover-bg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5ea75e95-d26d-4ee2-80b2-6dee2970d34d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the button changes from a circle into a pill.","styles":{}}],"children":[]},{"id":"ed38a3bc-637c-42ce-b8b5-8e9762ec122f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover state:","styles":{}}],"children":[]},{"id":"79040a74-175a-48ec-a2c6-879bed06d3f2","type":"procode","props":{"code":"width: 140px\nborder-radius: 50px\nbackground: near black","language":"javascript","filename":"","files":"[{\"id\":\"g487orzny\",\"name\":\"code\",\"code\":\"width: 140px\\nborder-radius: 50px\\nbackground: near black\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f6ea5c2f-97ba-467f-9718-e03e4f912294","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Hover Flow","styles":{}}],"children":[]},{"id":"03d5716e-7026-4442-b020-ca7f9afa909c","type":"procode","props":{"code":".button:hover .svgIcon {\n transform: translateY(-200%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"lz5kobmfu\",\"name\":\"code\",\"code\":\".button:hover .svgIcon {\\n transform: translateY(-200%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74e3ee40-771c-4ebd-8afd-240d1aa92c13","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the arrow icon moves upward and disappears out of the visible button area.","styles":{}}],"children":[]},{"id":"80d1d56e-3ac5-4af2-9dc9-661a2000376d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Reveal Flow","styles":{}}],"children":[]},{"id":"8e29fc8f-d618-4d2a-95ae-8e245b3c15cb","type":"procode","props":{"code":".button:hover::before {\n font-size: 13px;\n opacity: 1;\n bottom: unset;\n}","language":"javascript","filename":"","files":"[{\"id\":\"eq1pxjccj\",\"name\":\"code\",\"code\":\".button:hover::before {\\n font-size: 13px;\\n opacity: 1;\\n bottom: unset;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"27464587-7905-4334-a193-6f493220ed91","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the text becomes visible.","styles":{}}],"children":[]},{"id":"2c9cc3fa-dfec-44c1-96a5-35c27dcbee4d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"77a9aaa9-bf79-4051-a1d7-e158088b59d8","type":"procode","props":{"code":"Back to Top text starts below button\n↓\nHover\n↓\nFont size becomes 13px\n↓\nText appears inside expanded pill","language":"javascript","filename":"","files":"[{\"id\":\"vfr9u9mib\",\"name\":\"code\",\"code\":\"Back to Top text starts below button\\n↓\\nHover\\n↓\\nFont size becomes 13px\\n↓\\nText appears inside expanded pill\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de2ac152-c2a0-49e9-b9a7-64b5a699244a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow","styles":{}}],"children":[]},{"id":"5ce2160a-102d-4ff9-9afe-39834f056911","type":"procode","props":{"code":"Default\n↓\nBlack circular button\n↓\nWhite arrow icon visible\n↓\nUser hovers\n↓\nButton expands into pill\n↓\nArrow moves upward\n↓\nBack to Top text appears","language":"javascript","filename":"","files":"[{\"id\":\"ukho41oza\",\"name\":\"code\",\"code\":\"Default\\n↓\\nBlack circular button\\n↓\\nWhite arrow icon visible\\n↓\\nUser hovers\\n↓\\nButton expands into pill\\n↓\\nArrow moves upward\\n↓\\nBack to Top text appears\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c8fc4ea1-63fc-4449-80b4-92770b0eba9a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"8523a24c-4769-436e-a091-dc6937fa10fc","type":"procode","props":{"code":".button:active {\n transform: scale(0.93);\n transition-duration: 0.1s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qmk1yb0mw\",\"name\":\"code\",\"code\":\".button:active {\\n transform: scale(0.93);\\n transition-duration: 0.1s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9dff560a-2e37-4671-9638-b775facefb07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"75f35704-68ea-4a1f-bb72-345fed3a3481","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Flow","styles":{}}],"children":[]},{"id":"f1b7dc54-d10b-4b71-a240-fac0a0f57422","type":"procode","props":{"code":".button:focus-visible {\n outline: 3px solid rgba(0, 0, 0, 0.25);\n outline-offset: 4px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"esx7w39em\",\"name\":\"code\",\"code\":\".button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 4px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d84e6b89-406b-40a9-bf68-7988063ea75f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Keyboard focus shows an outline outside the button.","styles":{}}],"children":[]},{"id":"246d9262-e3ff-407d-a33f-f2c08abb9ac9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow","styles":{}}],"children":[]},{"id":"2bf4194d-f52f-453d-980c-1956d00ee0e9","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .button,\n .svgIcon,\n .button::before {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"p08fncly5\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .button,\\n .svgIcon,\\n .button::before {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d7f0d5b7-e4b0-450b-8528-c2351d0110d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For reduced motion users, the transitions are removed.","styles":{}}],"children":[]},{"id":"8611a67f-cd91-4fb1-a5af-e43ffb54efce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\nThis component creates a circular black back-to-top button. On hover, the button expands into a pill, the arrow icon moves upward, and the ","styles":{}},{"type":"text","text":"Back to Top","styles":{"code":true}},{"type":"text","text":" text appears inside the button.","styles":{}}],"children":[]},{"id":"33bd47c6-7411-4a7a-be85-b467c8e3a9bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"bff83a20-e372-4685-a7f7-ade6163ade79","type":"procode","props":{"code":"Page\n└── button.button\n ├── ::before text layer\n └── svg.svgIcon\n └── arrow path","language":"javascript","filename":"","files":"[{\"id\":\"lnxwq5dj4\",\"name\":\"code\",\"code\":\"Page\\n└── button.button\\n ├── ::before text layer\\n └── svg.svgIcon\\n └── arrow path\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9621f622-9ba5-4d32-88bc-e5ee84cf4c01","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"4dfa3bd3-f112-4c61-a46d-750b42111bb7","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"qux5r5lwz\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13241bcc-84cd-432b-b732-42bb92a0e098","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button contains only the SVG arrow icon.","styles":{}}],"children":[]},{"id":"c642b906-87b4-46cb-94d4-80282746c82f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The visible text ","styles":{}},{"type":"text","text":"Back to Top","styles":{"code":true}},{"type":"text","text":" is created from CSS using ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"7edf27fc-6541-484b-9d65-9126c2117c6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout Flow","styles":{}}],"children":[]},{"id":"8ada3337-f632-4c60-ba48-576482b38e98","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uqn4r3bfd\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c0d09a33-5573-4364-aaa2-6fe42594f0a1","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":" class centers the button horizontally and vertically.","styles":{}}],"children":[]},{"id":"5cbe9e94-083e-496b-9c9e-aac6841f360a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Variable Flow","styles":{}}],"children":[]},{"id":"1f38d263-b5e8-43ab-be01-da3748f96b49","type":"procode","props":{"code":":root {\n --page-bg: #ffffff;\n --button-bg: #000000;\n --button-hover-bg: #111111;\n --button-text: #ffffff;\n --button-shadow: rgba(0, 0, 0, 0.16);\n}","language":"javascript","filename":"","files":"[{\"id\":\"xuojx5krj\",\"name\":\"code\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #000000;\\n --button-hover-bg: #111111;\\n --button-text: #ffffff;\\n --button-shadow: rgba(0, 0, 0, 0.16);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d25d737d-edb8-4c7e-bf0e-e5ca44fc57b0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"These variables control the page background, button color, hover color, text color, and outer shadow.","styles":{}}],"children":[]},{"id":"f6db853c-46a1-4597-a516-b9e2b4e8dde3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base Flow","styles":{}}],"children":[]},{"id":"92d60ce6-b3fb-4d3b-9629-3053b4a336ad","type":"procode","props":{"code":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: var(--button-bg);\n overflow: hidden;\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1jja9d3o3\",\"name\":\"code\",\"code\":\".button {\\n width: 50px;\\n height: 50px;\\n border-radius: 50%;\\n background-color: var(--button-bg);\\n overflow: hidden;\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2ebbcc5a-43f0-483e-96d3-dacea489c0c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default state:","styles":{}}],"children":[]},{"id":"fc999743-f424-4048-800e-3501601010d4","type":"procode","props":{"code":"width: 50px\nheight: 50px\nshape: circle\nbackground: black\ncontent: arrow icon","language":"javascript","filename":"","files":"[{\"id\":\"jo3631x7f\",\"name\":\"code\",\"code\":\"width: 50px\\nheight: 50px\\nshape: circle\\nbackground: black\\ncontent: arrow icon\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"414cd187-3953-45f0-bd4f-2a2c8087ed67","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" makes the ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" text layer position inside the button.","styles":{}}],"children":[]},{"id":"2f402170-2b44-4411-96c3-a485b0556db6","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":" clips the hidden text and moving icon.","styles":{}}],"children":[]},{"id":"51cdfe4d-a0ad-4986-8c08-4dc047e764f6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Flow","styles":{}}],"children":[]},{"id":"828e7ac5-53ad-41fe-948a-9b4af580acaf","type":"procode","props":{"code":".svgIcon {\n width: 12px;\n transition-duration: 0.3s;\n}\n\n.svgIcon path {\n fill: var(--button-text);\n}","language":"javascript","filename":"","files":"[{\"id\":\"idpp4ky2z\",\"name\":\"code\",\"code\":\".svgIcon {\\n width: 12px;\\n transition-duration: 0.3s;\\n}\\n\\n.svgIcon path {\\n fill: var(--button-text);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0fc12a5d-176b-457e-b492-1217f1e9eb5b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The arrow icon starts small at ","styles":{}},{"type":"text","text":"12px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"5f352da1-153c-41e9-afba-b8b9ac18ba40","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The SVG path uses white from ","styles":{}},{"type":"text","text":"--button-text","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f264ccd5-b773-4545-bf49-1354ef703227","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Text Flow","styles":{}}],"children":[]},{"id":"09f9c28d-a46a-4a25-bbd1-3d026763c44b","type":"procode","props":{"code":".button::before {\n position: absolute;\n bottom: -20px;\n content: \"Back to Top\";\n color: var(--button-text);\n font-size: 0px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"px2cgz4sb\",\"name\":\"code\",\"code\":\".button::before {\\n position: absolute;\\n bottom: -20px;\\n content: \\\"Back to Top\\\";\\n color: var(--button-text);\\n font-size: 0px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd7760f4-c50d-4c23-9596-f62e2e1a6fb7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text starts below the button.","styles":{}}],"children":[]},{"id":"1689050a-e472-40bb-8f0e-553876392748","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It also starts at ","styles":{}},{"type":"text","text":"font-size: 0px","styles":{"code":true}},{"type":"text","text":", so it is not visible in the default state.","styles":{}}],"children":[]},{"id":"184c47e3-219b-4ea4-8e85-2f89dada1fde","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Button Flow","styles":{}}],"children":[]},{"id":"6b7978d0-556a-4030-a2c5-be89519917f9","type":"procode","props":{"code":".button:hover {\n width: 140px;\n border-radius: 50px;\n background-color: var(--button-hover-bg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"hqwuhbja5\",\"name\":\"code\",\"code\":\".button:hover {\\n width: 140px;\\n border-radius: 50px;\\n background-color: var(--button-hover-bg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50954bd7-b7be-413a-8958-0645b756c80f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the button changes from a circle into a pill.","styles":{}}],"children":[]},{"id":"41f7c49c-60f1-4786-860d-f65f61971844","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover state:","styles":{}}],"children":[]},{"id":"bf4f80be-c6d4-4d09-88df-592add679e9c","type":"procode","props":{"code":"width: 140px\nborder-radius: 50px\nbackground: near black","language":"javascript","filename":"","files":"[{\"id\":\"7sah6zisz\",\"name\":\"code\",\"code\":\"width: 140px\\nborder-radius: 50px\\nbackground: near black\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"592abf12-774b-4d1b-892a-f4f4e9ee49af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Hover Flow","styles":{}}],"children":[]},{"id":"1577a70e-c675-4879-b2c4-63d496418013","type":"procode","props":{"code":".button:hover .svgIcon {\n transform: translateY(-200%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"2ta2pimx2\",\"name\":\"code\",\"code\":\".button:hover .svgIcon {\\n transform: translateY(-200%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6a468ebc-0ce7-4b14-b84b-1747d7aaace3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the arrow icon moves upward and disappears out of the visible button area.","styles":{}}],"children":[]},{"id":"98fe50f9-f8e3-406d-90ec-618b4a0a1fd6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Reveal Flow","styles":{}}],"children":[]},{"id":"b6090db9-53f6-445e-a7f1-adeeef2aa1be","type":"procode","props":{"code":".button:hover::before {\n font-size: 13px;\n opacity: 1;\n bottom: unset;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xxnaerqci\",\"name\":\"code\",\"code\":\".button:hover::before {\\n font-size: 13px;\\n opacity: 1;\\n bottom: unset;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"67a3f5e4-805c-409b-a27f-596777acb684","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the text becomes visible.","styles":{}}],"children":[]},{"id":"32f09a9d-3e79-4bec-a025-48d586652120","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"fd864853-52a5-477f-9a2a-f64c65c890e2","type":"procode","props":{"code":"Back to Top text starts below button\n↓\nHover\n↓\nFont size becomes 13px\n↓\nText appears inside expanded pill","language":"javascript","filename":"","files":"[{\"id\":\"xcexyxg0z\",\"name\":\"code\",\"code\":\"Back to Top text starts below button\\n↓\\nHover\\n↓\\nFont size becomes 13px\\n↓\\nText appears inside expanded pill\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fdaf8fc8-606c-42b9-acfb-b40cbcd51210","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow","styles":{}}],"children":[]},{"id":"b6ffc7ed-4755-4fe1-8e0c-d1e883ac62d6","type":"procode","props":{"code":"Default\n↓\nBlack circular button\n↓\nWhite arrow icon visible\n↓\nUser hovers\n↓\nButton expands into pill\n↓\nArrow moves upward\n↓\nBack to Top text appears","language":"javascript","filename":"","files":"[{\"id\":\"wpgix02hp\",\"name\":\"code\",\"code\":\"Default\\n↓\\nBlack circular button\\n↓\\nWhite arrow icon visible\\n↓\\nUser hovers\\n↓\\nButton expands into pill\\n↓\\nArrow moves upward\\n↓\\nBack to Top text appears\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4be99aea-1ab2-4c11-bdf2-f0e7d3b6f616","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"a2cc1bbe-e9d8-432f-96ec-20e2689d8fa0","type":"procode","props":{"code":".button:active {\n transform: scale(0.93);\n transition-duration: 0.1s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dtcqqjtil\",\"name\":\"code\",\"code\":\".button:active {\\n transform: scale(0.93);\\n transition-duration: 0.1s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"162ae98c-3516-4ca3-87d3-567170504c0c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"52778711-5a7e-42c8-a019-05a6bd986f1c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Flow","styles":{}}],"children":[]},{"id":"c3533b17-8038-4d8d-8557-15a013f57ee5","type":"procode","props":{"code":".button:focus-visible {\n outline: 3px solid rgba(0, 0, 0, 0.25);\n outline-offset: 4px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"19f2gnukr\",\"name\":\"code\",\"code\":\".button:focus-visible {\\n outline: 3px solid rgba(0, 0, 0, 0.25);\\n outline-offset: 4px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"65e0c542-33eb-44bd-9e91-21c8c7ada3d5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Keyboard focus shows an outline outside the button.","styles":{}}],"children":[]},{"id":"07069af0-43f9-478d-9057-96ffdc76033c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow","styles":{}}],"children":[]},{"id":"74dda850-22af-4d74-9512-5bf0b9b227a5","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .button,\n .svgIcon,\n .button::before {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"jys070zwz\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .button,\\n .svgIcon,\\n .button::before {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0086dc7c-9332-46a7-9a73-9fd5cef6eea1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For reduced motion users, the transitions are removed.","styles":{}}],"children":[]},{"id":"eb2a5f23-540e-4d80-8bbf-0e0ab2ae048a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]