Black Arrow Expand Button

[{"id":"2603ea39-c674-44cb-97ab-11cc2ced7817","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d6f42382-7459-422b-b42b-8f8873c11055","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.199);\\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.Btn {\\n display: flex;\\n align-items: center;\\n justify-content: flex-start;\\n width: 45px;\\n height: 45px;\\n border: none;\\n border-radius: 50%;\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n transition-duration: 0.3s;\\n box-shadow: 2px 2px 10px var(--button-shadow);\\n background-color: var(--button-bg);\\n}\\n\\n.sign {\\n width: 100%;\\n transition-duration: 0.3s;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sign svg {\\n width: 22px;\\n}\\n\\n.sign svg path {\\n fill: var(--button-text);\\n}\\n\\n.text {\\n position: absolute;\\n right: 0%;\\n width: 0%;\\n opacity: 0;\\n color: var(--button-text);\\n font-size: 1.1em;\\n font-weight: 600;\\n transition-duration: 0.3s;\\n}\\n\\n.Btn:hover {\\n width: 125px;\\n border-radius: 40px;\\n transition-duration: 0.3s;\\n background-color: var(--button-hover-bg);\\n}\\n\\n.Btn:hover .sign {\\n width: 30%;\\n transition-duration: 0.3s;\\n padding-left: 20px;\\n}\\n\\n.Btn:hover .text {\\n opacity: 1;\\n width: 70%;\\n transition-duration: 0.3s;\\n padding-right: 10px;\\n}\\n\\n.Btn:active {\\n transform: translate(2px, 2px);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .Btn,\\n .sign,\\n .text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Black Arrow 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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"959a6f82-5ad4-4a2c-9c16-84d45a6be753","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"522fbdc7-8a1a-47fa-ac1d-30a5e260270e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"dde73a32-0b52-4a56-af50-4acc1a02ac61","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"884931c5-fa4e-4c2e-add4-49e9fa7bfa0a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"528d09a9-0d64-4fab-bc2a-2e3e7fa69d69","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.199);\\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.Btn {\\n display: flex;\\n align-items: center;\\n justify-content: flex-start;\\n width: 45px;\\n height: 45px;\\n border: none;\\n border-radius: 50%;\\n cursor: pointer;\\n position: relative;\\n overflow: hidden;\\n transition-duration: 0.3s;\\n box-shadow: 2px 2px 10px var(--button-shadow);\\n background-color: var(--button-bg);\\n}\\n\\n.sign {\\n width: 100%;\\n transition-duration: 0.3s;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sign svg {\\n width: 22px;\\n}\\n\\n.sign svg path {\\n fill: var(--button-text);\\n}\\n\\n.text {\\n position: absolute;\\n right: 0%;\\n width: 0%;\\n opacity: 0;\\n color: var(--button-text);\\n font-size: 1.1em;\\n font-weight: 600;\\n transition-duration: 0.3s;\\n}\\n\\n.Btn:hover {\\n width: 125px;\\n border-radius: 40px;\\n transition-duration: 0.3s;\\n background-color: var(--button-hover-bg);\\n}\\n\\n.Btn:hover .sign {\\n width: 30%;\\n transition-duration: 0.3s;\\n padding-left: 20px;\\n}\\n\\n.Btn:hover .text {\\n opacity: 1;\\n width: 70%;\\n transition-duration: 0.3s;\\n padding-right: 10px;\\n}\\n\\n.Btn:active {\\n transform: translate(2px, 2px);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .Btn,\\n .sign,\\n .text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4d73765-745c-4217-8a1b-b5acdd217a1c","type":"divider","props":{},"children":[]},{"id":"8c60a676-5463-4437-ac95-84151bdd83ac","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"5c42a678-72ae-4fe8-bfb3-30f3eeabc627","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"\nThe button has two inner elements:","styles":{}}],"children":[]},{"id":"ab3aedfc-5da1-4856-af8c-b1ac29ee682a","type":"procode","props":{"code":"

...

Button

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

...

\\n

Button

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25567612-51a6-4ec4-ab6d-49c8680af18a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".sign","styles":{"code":true}},{"type":"text","text":" element contains the arrow SVG.\n\nThe ","styles":{}},{"type":"text","text":".text","styles":{"code":true}},{"type":"text","text":" element contains the hidden button label.","styles":{}}],"children":[]},{"id":"f78b310d-d687-411b-94eb-2964d41b5726","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe wrapper uses CSS Grid to center the button in the viewport.","styles":{}}],"children":[]},{"id":"23a37204-d674-44dc-9a54-2d157c5b1914","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ncypx3m4p\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3ba70673-4541-42b5-b075-55242924d6d9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base State\n\nThe button starts as a small circle.","styles":{}}],"children":[]},{"id":"cdaf754e-6cd2-4546-96a9-1db07ad7ec15","type":"procode","props":{"code":".Btn {\n width: 45px;\n height: 45px;\n border-radius: 50%;\n background-color: var(--button-bg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rsx1h4l6n\",\"name\":\"code\",\"code\":\".Btn {\\n width: 45px;\\n height: 45px;\\n border-radius: 50%;\\n background-color: var(--button-bg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"964b715a-f21b-4b31-8bb5-58dd9d71443d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Because the width and height are equal, ","styles":{}},{"type":"text","text":"border-radius: 50%","styles":{"code":true}},{"type":"text","text":" creates a perfect circular button.","styles":{}}],"children":[]},{"id":"900ef5f6-101b-4d48-8c4f-1920930660f7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Icon\n\nThe SVG arrow is inside ","styles":{}},{"type":"text","text":".sign","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4de949bf-7c55-4c4b-9640-f0dd67a720f9","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"","url":"data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20d%3D%22M13.172%2012L8.222%207.05L9.636%205.636L16%2012L9.636%2018.364L8.222%2016.95L13.172%2012Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E","caption":"","showPreview":true},"children":[]},{"id":"6a5c37cd-9b35-49e8-b538-cfee9863d9bb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The icon is white because the SVG path uses:","styles":{}}],"children":[]},{"id":"c2b35efb-d59a-4278-8e68-d7d164d30212","type":"procode","props":{"code":".sign svg path {\n fill: var(--button-text);\n}","language":"javascript","filename":"","files":"[{\"id\":\"cpcjq4lug\",\"name\":\"code\",\"code\":\".sign svg path {\\n fill: var(--button-text);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c4bce2aa-68e6-4c65-9052-840309b4406b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Hidden State\n\nThe text is hidden by default using ","styles":{}},{"type":"text","text":"width: 0%","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"opacity: 0","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4261152e-3298-4ba9-9c09-3f0039aded54","type":"procode","props":{"code":".text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gvfhu1dow\",\"name\":\"code\",\"code\":\".text {\\n position: absolute;\\n right: 0%;\\n width: 0%;\\n opacity: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a9e3a0b6-2923-4288-a766-eb0de9c48464","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Expand Flow\n\nWhen the button is hovered, the button expands from ","styles":{}},{"type":"text","text":"45px","styles":{"code":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"125px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"6333f96c-9501-43b6-8047-0b65cafd8eb0","type":"procode","props":{"code":".Btn:hover {\n width: 125px;\n border-radius: 40px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yd5c8v37v\",\"name\":\"code\",\"code\":\".Btn:hover {\\n width: 125px;\\n border-radius: 40px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"050fc66b-4da8-4003-8adf-d975c2d7b14c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This changes the shape from a circle into a pill.","styles":{}}],"children":[]},{"id":"1539bf74-e4d3-4231-ac03-4b7071999ecf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Movement Flow\n\nOn hover, the ","styles":{}},{"type":"text","text":".sign","styles":{"code":true}},{"type":"text","text":" area becomes smaller and shifts left with padding.","styles":{}}],"children":[]},{"id":"95cb0717-d6d1-4fd5-a6dc-5342d55dd26f","type":"procode","props":{"code":".Btn:hover .sign {\n width: 30%;\n padding-left: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"t4770tdn7\",\"name\":\"code\",\"code\":\".Btn:hover .sign {\\n width: 30%;\\n padding-left: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"21350159-ca06-4838-ad54-2b8d06f7511e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This keeps the arrow on the left side of the expanded button.","styles":{}}],"children":[]},{"id":"c04a0133-2771-4daf-9f07-e5477ef3d3c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Reveal Flow\n\nOn hover, the text gets space inside the button and becomes visible.","styles":{}}],"children":[]},{"id":"ce557834-2542-44cf-b0ea-e2c7ecaf45f6","type":"procode","props":{"code":".Btn:hover .text {\n opacity: 1;\n width: 70%;\n padding-right: 10px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"y8u8q24ni\",\"name\":\"code\",\"code\":\".Btn:hover .text {\\n opacity: 1;\\n width: 70%;\\n padding-right: 10px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ef0d5aa-2da9-4f7e-b1bc-adeac207c2d5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text appears on the right side while the arrow stays on the left.","styles":{}}],"children":[]},{"id":"5be42b25-b84d-422a-bdb0-66eb0aa3b133","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Effect\n\nWhen clicked, the button moves slightly down and right.","styles":{}}],"children":[]},{"id":"2417b37b-80af-4f18-887a-471318a5e55f","type":"procode","props":{"code":".Btn:active {\n transform: translate(2px, 2px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"oydijwbl4\",\"name\":\"code\",\"code\":\".Btn:active {\\n transform: translate(2px, 2px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de9e69c3-f2c7-453c-a0ba-7bed1675b163","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n\nThe media query removes transitions for users who prefer reduced motion.","styles":{}}],"children":[]},{"id":"22a0b2ba-26c6-4b12-8834-1888a11ab7d5","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .Btn,\n .sign,\n .text {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"y713yo2w5\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .Btn,\\n .sign,\\n .text {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"38f9c17e-ae87-48ba-aed9-4e89af41b983","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]