Arrow Button

[{"id":"936545bd-3907-4ee6-80af-9172958d5cce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e035dd86-1985-4660-9377-fe88f22c7a06","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #090712;\\n\\n --button-text: #ffffff;\\n --button-bg: rgba(124, 58, 237, 0.18);\\n --button-border: rgba(168, 85, 247, 0.55);\\n\\n --button-hover-1: rgba(124, 58, 237, 0.38);\\n --button-hover-2: rgba(147, 51, 234, 0.5);\\n --button-hover-3: rgba(168, 85, 247, 0.68);\\n\\n --button-shadow: rgba(168, 85, 247, 0.75);\\n --button-glow: rgba(168, 85, 247, 0.55);\\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.arrow-action {\\n width: 74px;\\n height: 54px;\\n color: var(--button-text);\\n padding: 10px 15px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n text-decoration: none;\\n background: var(--button-bg);\\n border: 1px solid var(--button-border);\\n border-radius: 8px;\\n overflow: hidden;\\n box-shadow: 0 0 24px rgba(168, 85, 247, 0.18);\\n transition:\\n transform 220ms ease,\\n box-shadow 220ms ease,\\n border-color 220ms ease,\\n background 220ms ease;\\n}\\n\\n.arrow-action svg {\\n display: block;\\n flex: 0 0 auto;\\n filter: drop-shadow(0 0 14px var(--button-glow));\\n}\\n\\n/* Icon stays centered. No hover movement. */\\n.arrow-action:hover {\\n background: linear-gradient(\\n to bottom,\\n var(--button-hover-1),\\n var(--button-hover-2),\\n var(--button-hover-3)\\n );\\n border-color: rgba(216, 180, 254, 0.9);\\n box-shadow:\\n 0 6px 0 var(--button-shadow),\\n 0 0 32px rgba(168, 85, 247, 0.36);\\n transform: translateY(-6px);\\n}\\n\\n.arrow-action:active {\\n transform: translateY(2px);\\n box-shadow: none;\\n}\\n\\n.arrow-action:focus-visible {\\n outline: 2px solid rgba(216, 180, 254, 0.9);\\n outline-offset: 4px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .arrow-action {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Arrow Button\\n \\n \\n \\n

\\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":"670f92a0-f91b-4f20-826d-7a16d045f07b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"bfd3b005-ff68-448a-af83-b98d11aaec07","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"e730be76-163f-46ab-be7a-0ca4a4d89f95","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n \\n \\n \\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ab7f7cf1-c54e-476f-8ab1-955147d355b6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"a98eb2ee-ba4c-4bb6-8905-86efb983d2df","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #090712;\\n\\n --button-text: #ffffff;\\n --button-bg: rgba(124, 58, 237, 0.18);\\n --button-border: rgba(168, 85, 247, 0.55);\\n\\n --button-hover-1: rgba(124, 58, 237, 0.38);\\n --button-hover-2: rgba(147, 51, 234, 0.5);\\n --button-hover-3: rgba(168, 85, 247, 0.68);\\n\\n --button-shadow: rgba(168, 85, 247, 0.75);\\n --button-glow: rgba(168, 85, 247, 0.55);\\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.arrow-action {\\n width: 74px;\\n height: 54px;\\n color: var(--button-text);\\n padding: 10px 15px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n text-decoration: none;\\n background: var(--button-bg);\\n border: 1px solid var(--button-border);\\n border-radius: 8px;\\n overflow: hidden;\\n box-shadow: 0 0 24px rgba(168, 85, 247, 0.18);\\n transition:\\n transform 220ms ease,\\n box-shadow 220ms ease,\\n border-color 220ms ease,\\n background 220ms ease;\\n}\\n\\n.arrow-action svg {\\n display: block;\\n flex: 0 0 auto;\\n filter: drop-shadow(0 0 14px var(--button-glow));\\n}\\n\\n/* Icon stays centered. No hover movement. */\\n.arrow-action:hover {\\n background: linear-gradient(\\n to bottom,\\n var(--button-hover-1),\\n var(--button-hover-2),\\n var(--button-hover-3)\\n );\\n border-color: rgba(216, 180, 254, 0.9);\\n box-shadow:\\n 0 6px 0 var(--button-shadow),\\n 0 0 32px rgba(168, 85, 247, 0.36);\\n transform: translateY(-6px);\\n}\\n\\n.arrow-action:active {\\n transform: translateY(2px);\\n box-shadow: none;\\n}\\n\\n.arrow-action:focus-visible {\\n outline: 2px solid rgba(216, 180, 254, 0.9);\\n outline-offset: 4px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .arrow-action {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5c6c55db-5db3-4b25-a52c-1f55553eab39","type":"divider","props":{},"children":[]},{"id":"dc72e961-559f-4552-8701-203ebd3c6c1c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"2d426274-2410-4a6b-a6c4-b512aeb886b0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow\n\nThe ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":" file is the visual entry point of the component.","styles":{}}],"children":[]},{"id":"ab1c06cb-f75a-40db-beef-ba6225a3548f","type":"procode","props":{"code":"

\n \n \n \n

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

\\n \\n \\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ddf18529-8271-4336-97fc-5fc17583d8db","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":" element is used only as a full-screen wrapper to center the button.","styles":{}}],"children":[]},{"id":"d2f9969d-2080-49f2-af40-40c2d1cc8274","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".arrow-action","styles":{"code":true}},{"type":"text","text":" element is the actual button. It uses an anchor tag, so it can behave like a clickable link.","styles":{}}],"children":[]},{"id":"2814aefa-6e29-4517-9254-3d097dcdd720","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The SVG icon uses ","styles":{}},{"type":"text","text":"currentColor","styles":{"code":true}},{"type":"text","text":", meaning the icon color follows the CSS ","styles":{}},{"type":"text","text":"color","styles":{"code":true}},{"type":"text","text":" value from ","styles":{}},{"type":"text","text":".arrow-action","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"ae645a70-5b80-48bb-bf2f-582804863b42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS Flow\n\nThe ","styles":{}},{"type":"text","text":"/styles.css","styles":{"code":true}},{"type":"text","text":" file controls the complete design.","styles":{}}],"children":[]},{"id":"c0c75a2d-c447-4db1-9fed-b109a528d425","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Root Variables","styles":{}}],"children":[]},{"id":"de5f0819-9381-49b8-aed4-ce968fff9e72","type":"procode","props":{"code":":root {\n --page-bg: #090712;\n --button-text: #ffffff;\n --button-bg: rgba(124, 58, 237, 0.18);\n --button-border: rgba(168, 85, 247, 0.55);\n --button-shadow: rgba(168, 85, 247, 0.75);\n --button-glow: rgba(168, 85, 247, 0.55);\n}","language":"javascript","filename":"","files":"[{\"id\":\"wiozii0tx\",\"name\":\"code\",\"code\":\":root {\\n --page-bg: #090712;\\n --button-text: #ffffff;\\n --button-bg: rgba(124, 58, 237, 0.18);\\n --button-border: rgba(168, 85, 247, 0.55);\\n --button-shadow: rgba(168, 85, 247, 0.75);\\n --button-glow: rgba(168, 85, 247, 0.55);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"83430391-815d-4857-a082-75e70dca2cf4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"These variables make the color system easier to edit. The component uses a dark purple background, white icon, purple border, and purple glow.","styles":{}}],"children":[]},{"id":"de70b102-2288-43cf-89e5-c3a6f2fd9de0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Page Layout","styles":{}}],"children":[]},{"id":"8fb25291-a460-4b9f-8407-9a2764fe7d9f","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"y0fs6sbgb\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"12410581-33b4-4c05-959d-1e8aa8c8014f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This centers the button horizontally and vertically.","styles":{}}],"children":[]},{"id":"b7cb4f18-93d2-4d45-aeec-a0f79f9072d1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base State","styles":{}}],"children":[]},{"id":"4fc01ae2-2f47-481f-94de-43c65597a738","type":"procode","props":{"code":".arrow-action {\n width: 74px;\n height: 54px;\n display: flex;\n justify-content: center;\n align-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"irkjtz88g\",\"name\":\"code\",\"code\":\".arrow-action {\\n width: 74px;\\n height: 54px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e5e52d9-ce1f-49fe-884a-541b35d47e48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button has a fixed size and uses flexbox to keep the arrow perfectly centered.","styles":{}}],"children":[]},{"id":"8b8b76ce-e792-4d18-9b5d-04456eae0700","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Flow","styles":{}}],"children":[]},{"id":"c85e5054-3c71-49c1-8a9d-3b7e72bef0bd","type":"procode","props":{"code":".arrow-action svg {\n display: block;\n flex: 0 0 auto;\n filter: drop-shadow(0 0 14px var(--button-glow));\n}","language":"javascript","filename":"","files":"[{\"id\":\"8s6gs9zk3\",\"name\":\"code\",\"code\":\".arrow-action svg {\\n display: block;\\n flex: 0 0 auto;\\n filter: drop-shadow(0 0 14px var(--button-glow));\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f5b63a8e-681f-4da5-8ea8-abd65845ebb0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The SVG has no movement animation. It stays centered at all times. Only the glow filter is applied to make the icon look more polished.","styles":{}}],"children":[]},{"id":"504c1069-cdf9-4e84-83f3-c693595f20f3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow","styles":{}}],"children":[]},{"id":"e2d69160-af39-4c51-a88b-db662adbb880","type":"procode","props":{"code":".arrow-action:hover {\n background: linear-gradient(\n to bottom,\n var(--button-hover-1),\n var(--button-hover-2),\n var(--button-hover-3)\n );\n transform: translateY(-6px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"g0u3z2rgc\",\"name\":\"code\",\"code\":\".arrow-action:hover {\\n background: linear-gradient(\\n to bottom,\\n var(--button-hover-1),\\n var(--button-hover-2),\\n var(--button-hover-3)\\n );\\n transform: translateY(-6px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1193bb3-ddf9-4c0b-8fcf-9d4dc27acd0c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When hovered, the button moves upward and the background becomes brighter. The icon itself does not move.","styles":{}}],"children":[]},{"id":"4e17285f-739f-4412-9d43-fdacb7211d91","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"d10543f7-c8ff-48e2-a99e-372bb80b3bc5","type":"procode","props":{"code":".arrow-action:active {\n transform: translateY(2px);\n box-shadow: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kwefnl8va\",\"name\":\"code\",\"code\":\".arrow-action:active {\\n transform: translateY(2px);\\n box-shadow: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f21e8905-b38a-4302-802a-cf5f0dbb5900","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button moves downward and removes the shadow, creating a pressed-button effect.","styles":{}}],"children":[]},{"id":"a134f6a7-afc9-4535-b0bb-80267ab0ddc4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Accessibility Flow","styles":{}}],"children":[]},{"id":"663990ea-036b-4dd1-9289-5618f8008b78","type":"procode","props":{"code":".arrow-action:focus-visible {\n outline: 2px solid rgba(216, 180, 254, 0.9);\n outline-offset: 4px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tqe5jku7b\",\"name\":\"code\",\"code\":\".arrow-action:focus-visible {\\n outline: 2px solid rgba(216, 180, 254, 0.9);\\n outline-offset: 4px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44855fb4-dfc1-487d-baf2-4112c3fa2345","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This gives keyboard users a visible focus outline when they tab to the button.","styles":{}}],"children":[]},{"id":"c509634c-c02d-4b2a-a724-9acb91c34753","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow","styles":{}}],"children":[]},{"id":"d8680573-4a64-48f9-b685-c1d11c425a9b","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .arrow-action {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"sv8gt2nqt\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .arrow-action {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce80aa3e-92a9-4fa4-95c0-c4ebd5334ca7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If the user prefers reduced motion, the button transition is disabled.","styles":{}}],"children":[]},{"id":"f6822dc4-39ff-453b-874a-2130f933ef5f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]