Circle Arrow Button

[{"id":"b0054850-6296-417e-9867-0b1edea28272","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"fd404648-73f5-42c5-8566-9f99ba778c23","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.styled-wrapper .button {\\n display: block;\\n position: relative;\\n width: 76px;\\n height: 76px;\\n margin: 0;\\n overflow: hidden;\\n outline: none;\\n background-color: transparent;\\n cursor: pointer;\\n border: 0;\\n}\\n\\n.styled-wrapper .button::before {\\n content: \\\"\\\";\\n position: absolute;\\n border-radius: 50%;\\n inset: 7px;\\n border: 3px solid black;\\n transition:\\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\\n}\\n\\n.styled-wrapper .button::after {\\n content: \\\"\\\";\\n position: absolute;\\n border-radius: 50%;\\n inset: 7px;\\n border: 4px solid #5D3FD3;\\n transform: scale(1.3);\\n opacity: 0;\\n transition:\\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\\n}\\n\\n.styled-wrapper .button:hover::before,\\n.styled-wrapper .button:focus-visible::before {\\n opacity: 0;\\n transform: scale(0.7);\\n transition:\\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\\n}\\n\\n.styled-wrapper .button:hover::after,\\n.styled-wrapper .button:focus-visible::after {\\n opacity: 1;\\n transform: scale(1);\\n transition:\\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\\n}\\n\\n.styled-wrapper .button-box {\\n display: flex;\\n position: absolute;\\n top: 0;\\n left: 0;\\n transition: transform 0.4s ease;\\n}\\n\\n.styled-wrapper .button-elem {\\n display: block;\\n width: 30px;\\n height: 30px;\\n margin: 24px 18px 0 22px;\\n transform: rotate(360deg);\\n fill: #f0eeef;\\n}\\n\\n.styled-wrapper .arrow-icon {\\n display: block;\\n width: 30px;\\n height: 30px;\\n}\\n\\n.styled-wrapper .button:hover .button-box,\\n.styled-wrapper .button:focus-visible .button-box {\\n transform: translateX(-69px);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .styled-wrapper .button,\\n .styled-wrapper .button::before,\\n .styled-wrapper .button::after,\\n .styled-wrapper .button-box {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Circle Arrow Button\\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":"8180662c-2923-4e73-bbe1-92eef3e32210","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"0cf3181b-3550-4ecf-b625-a57f68236179","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a680567-366a-4224-b726-8a5bc21b7df7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"dffabc34-777c-44dc-ad95-9197fbc0cdf0","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.styled-wrapper .button {\\n display: block;\\n position: relative;\\n width: 76px;\\n height: 76px;\\n margin: 0;\\n overflow: hidden;\\n outline: none;\\n background-color: transparent;\\n cursor: pointer;\\n border: 0;\\n}\\n\\n.styled-wrapper .button::before {\\n content: \\\"\\\";\\n position: absolute;\\n border-radius: 50%;\\n inset: 7px;\\n border: 3px solid black;\\n transition:\\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\\n}\\n\\n.styled-wrapper .button::after {\\n content: \\\"\\\";\\n position: absolute;\\n border-radius: 50%;\\n inset: 7px;\\n border: 4px solid #5D3FD3;\\n transform: scale(1.3);\\n opacity: 0;\\n transition:\\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\\n}\\n\\n.styled-wrapper .button:hover::before,\\n.styled-wrapper .button:focus-visible::before {\\n opacity: 0;\\n transform: scale(0.7);\\n transition:\\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\\n}\\n\\n.styled-wrapper .button:hover::after,\\n.styled-wrapper .button:focus-visible::after {\\n opacity: 1;\\n transform: scale(1);\\n transition:\\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\\n}\\n\\n.styled-wrapper .button-box {\\n display: flex;\\n position: absolute;\\n top: 0;\\n left: 0;\\n transition: transform 0.4s ease;\\n}\\n\\n.styled-wrapper .button-elem {\\n display: block;\\n width: 30px;\\n height: 30px;\\n margin: 24px 18px 0 22px;\\n transform: rotate(360deg);\\n fill: #f0eeef;\\n}\\n\\n.styled-wrapper .arrow-icon {\\n display: block;\\n width: 30px;\\n height: 30px;\\n}\\n\\n.styled-wrapper .button:hover .button-box,\\n.styled-wrapper .button:focus-visible .button-box {\\n transform: translateX(-69px);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .styled-wrapper .button,\\n .styled-wrapper .button::before,\\n .styled-wrapper .button::after,\\n .styled-wrapper .button-box {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c972a87b-1198-482e-bfff-ea0d0d740004","type":"divider","props":{},"children":[]},{"id":"49086681-2442-481a-8c7b-c1c677d1d64b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"56a20daf-814f-443c-8fd5-f8c712458e69","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a circular arrow button. It has a black circular border by default, then changes to a purple circular border on hover or keyboard focus.","styles":{}}],"children":[]},{"id":"b8d6462d-b995-4f70-a26d-c1643645f06d","type":"procode","props":{"code":".styled-wrapper .button::before {\n border: 3px solid black;\n}\n\n.styled-wrapper .button::after {\n border: 4px solid #5D3FD3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fvps7c2g6\",\"name\":\"code\",\"code\":\".styled-wrapper .button::before {\\n border: 3px solid black;\\n}\\n\\n.styled-wrapper .button::after {\\n border: 4px solid #5D3FD3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"61bc0e9c-2dac-45c7-b27e-1e9d7afa5fbb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The button is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the button in the middle.","styles":{}}],"children":[]},{"id":"250e5cff-b07c-4e3d-bf6c-75cafc38860d","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"pzww5vkva\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2010bc28-b639-47fe-b888-203bfede4406","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button","styles":{"code":true}},{"type":"text","text":" is a ","styles":{}},{"type":"text","text":"76px","styles":{"code":true}},{"type":"text","text":" circular control area. It uses ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" so the sliding arrow icons stay clipped inside the button area.","styles":{}}],"children":[]},{"id":"f4073ba0-4198-4c1c-99d5-b810d8048065","type":"procode","props":{"code":".styled-wrapper .button {\n display: block;\n position: relative;\n width: 76px;\n height: 76px;\n margin: 0;\n overflow: hidden;\n outline: none;\n background-color: transparent;\n cursor: pointer;\n border: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ee3z0sz7q\",\"name\":\"code\",\"code\":\".styled-wrapper .button {\\n display: block;\\n position: relative;\\n width: 76px;\\n height: 76px;\\n margin: 0;\\n overflow: hidden;\\n outline: none;\\n background-color: transparent;\\n cursor: pointer;\\n border: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"76f19715-bd8d-408a-9e30-8cbc2421d569","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Circle Border\n","styles":{"bold":true}},{"type":"text","text":"The default black circle is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":". It sits inside the button using ","styles":{}},{"type":"text","text":"inset: 7px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"08ea6e95-f769-4dc4-970c-4d0c79cd9758","type":"procode","props":{"code":".styled-wrapper .button::before {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n inset: 7px;\n border: 3px solid black;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jljv40agz\",\"name\":\"code\",\"code\":\".styled-wrapper .button::before {\\n content: \\\"\\\";\\n position: absolute;\\n border-radius: 50%;\\n inset: 7px;\\n border: 3px solid black;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec9aeb8a-2196-4804-85ce-5a59a6d2d286","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Circle Border\n","styles":{"bold":true}},{"type":"text","text":"The purple hover circle is created with ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":". It starts larger with ","styles":{}},{"type":"text","text":"scale(1.3)","styles":{"code":true}},{"type":"text","text":" and hidden with ","styles":{}},{"type":"text","text":"opacity: 0","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"18b45f4d-028d-4c6b-a458-7ddae45a7cf4","type":"procode","props":{"code":".styled-wrapper .button::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n inset: 7px;\n border: 4px solid #5D3FD3;\n transform: scale(1.3);\n opacity: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"h7ljws9i1\",\"name\":\"code\",\"code\":\".styled-wrapper .button::after {\\n content: \\\"\\\";\\n position: absolute;\\n border-radius: 50%;\\n inset: 7px;\\n border: 4px solid #5D3FD3;\\n transform: scale(1.3);\\n opacity: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ddbe398d-5205-46ad-bcee-41ab8d355e74","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Border Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover or focus, the black circle shrinks and fades out.","styles":{}}],"children":[]},{"id":"8488bd9a-4dce-4fbc-8793-9206944fde49","type":"procode","props":{"code":".styled-wrapper .button:hover::before,\n.styled-wrapper .button:focus-visible::before {\n opacity: 0;\n transform: scale(0.7);\n}","language":"javascript","filename":"","files":"[{\"id\":\"0klp088iu\",\"name\":\"code\",\"code\":\".styled-wrapper .button:hover::before,\\n.styled-wrapper .button:focus-visible::before {\\n opacity: 0;\\n transform: scale(0.7);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33a8bb8b-7188-4e49-91a0-6f64191cc469","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purple Border Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover or focus, the purple circle becomes visible and scales back to normal size.","styles":{}}],"children":[]},{"id":"96e174bd-ede1-435b-9718-02c958a6544e","type":"procode","props":{"code":".styled-wrapper .button:hover::after,\n.styled-wrapper .button:focus-visible::after {\n opacity: 1;\n transform: scale(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ezaq1um18\",\"name\":\"code\",\"code\":\".styled-wrapper .button:hover::after,\\n.styled-wrapper .button:focus-visible::after {\\n opacity: 1;\\n transform: scale(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4024c3c3-7b02-4b55-ab82-741aeff781e8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Track\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-box","styles":{"code":true}},{"type":"text","text":" holds two arrow elements side by side. It is absolutely positioned so it can slide horizontally on hover.","styles":{}}],"children":[]},{"id":"2b2bec4a-ada5-40c3-b6d5-aafe9614d321","type":"procode","props":{"code":".styled-wrapper .button-box {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.4s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"3pybfufgm\",\"name\":\"code\",\"code\":\".styled-wrapper .button-box {\\n display: flex;\\n position: absolute;\\n top: 0;\\n left: 0;\\n transition: transform 0.4s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44ff0f90-7039-43d5-bb45-63323d7e50f4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Element\n","styles":{"bold":true}},{"type":"text","text":"Each ","styles":{}},{"type":"text","text":".button-elem","styles":{"code":true}},{"type":"text","text":" contains one arrow SVG. The spacing places the arrow inside the circular button.","styles":{}}],"children":[]},{"id":"4353d607-e5e1-474d-adf7-65041d38aee6","type":"procode","props":{"code":".styled-wrapper .button-elem {\n display: block;\n width: 30px;\n height: 30px;\n margin: 24px 18px 0 22px;\n transform: rotate(360deg);\n fill: #f0eeef;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lr56a4cvx\",\"name\":\"code\",\"code\":\".styled-wrapper .button-elem {\\n display: block;\\n width: 30px;\\n height: 30px;\\n margin: 24px 18px 0 22px;\\n transform: rotate(360deg);\\n fill: #f0eeef;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dae27d31-bd4e-47ac-805e-de5f828be8d3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Icon Size\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".arrow-icon","styles":{"code":true}},{"type":"text","text":" sets the SVG arrow size.","styles":{}}],"children":[]},{"id":"e33fec9a-dbf0-4c30-8c94-7eda9d248620","type":"procode","props":{"code":".styled-wrapper .arrow-icon {\n display: block;\n width: 30px;\n height: 30px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9hptfcce8\",\"name\":\"code\",\"code\":\".styled-wrapper .arrow-icon {\\n display: block;\\n width: 30px;\\n height: 30px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cadb6f05-19ce-4d4b-8ca5-6f46935b6905","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Slide Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover or focus, the whole ","styles":{}},{"type":"text","text":".button-box","styles":{"code":true}},{"type":"text","text":" moves left by ","styles":{}},{"type":"text","text":"69px","styles":{"code":true}},{"type":"text","text":". This makes the first arrow slide out and the second arrow slide into view.","styles":{}}],"children":[]},{"id":"0ae98836-eb59-416f-ade9-f8ec1a64938e","type":"procode","props":{"code":".styled-wrapper .button:hover .button-box,\n.styled-wrapper .button:focus-visible .button-box {\n transform: translateX(-69px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"k46vtybuh\",\"name\":\"code\",\"code\":\".styled-wrapper .button:hover .button-box,\\n.styled-wrapper .button:focus-visible .button-box {\\n transform: translateX(-69px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4cc2faa7-3995-4aa8-87df-c7c0d035dbfc","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why Two SVG Icons Are Used\n","styles":{"bold":true}},{"type":"text","text":"The button needs one arrow to leave and another arrow to enter. Both arrows use the same path, and the parent ","styles":{}},{"type":"text","text":".button-box","styles":{"code":true}},{"type":"text","text":" slides them together.","styles":{}}],"children":[]},{"id":"31f4ec2e-b857-4f0f-b677-6040f9f348ce","type":"procode","props":{"code":"

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

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

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

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3b60eff9-7d9a-4a18-bd0d-072d7eda7f9b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main interaction flow. The border switches from black to purple, and the arrow row slides left.","styles":{}}],"children":[]},{"id":"f9fbec13-1886-4c25-845b-21f876ec65a1","type":"procode","props":{"code":".styled-wrapper .button:hover::before,\n.styled-wrapper .button:focus-visible::before {\n opacity: 0;\n transform: scale(0.7);\n}\n\n.styled-wrapper .button:hover::after,\n.styled-wrapper .button:focus-visible::after {\n opacity: 1;\n transform: scale(1);\n}\n\n.styled-wrapper .button:hover .button-box,\n.styled-wrapper .button:focus-visible .button-box {\n transform: translateX(-69px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"hxq3toxqn\",\"name\":\"code\",\"code\":\".styled-wrapper .button:hover::before,\\n.styled-wrapper .button:focus-visible::before {\\n opacity: 0;\\n transform: scale(0.7);\\n}\\n\\n.styled-wrapper .button:hover::after,\\n.styled-wrapper .button:focus-visible::after {\\n opacity: 1;\\n transform: scale(1);\\n}\\n\\n.styled-wrapper .button:hover .button-box,\\n.styled-wrapper .button:focus-visible .button-box {\\n transform: translateX(-69px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13d19aef-237b-46b5-a54e-8f73b2cc6478","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"inset: 7px","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The circle border is not placed at the outer edge of the ","styles":{}},{"type":"text","text":"76px","styles":{"code":true}},{"type":"text","text":" button. ","styles":{}},{"type":"text","text":"inset: 7px","styles":{"code":true}},{"type":"text","text":" pulls the border inward so it has spacing inside the button area.","styles":{}}],"children":[]},{"id":"5e195457-d2d8-4af2-aa1d-4246b2525428","type":"procode","props":{"code":".styled-wrapper .button::before,\n.styled-wrapper .button::after {\n inset: 7px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dyy3bh55i\",\"name\":\"code\",\"code\":\".styled-wrapper .button::before,\\n.styled-wrapper .button::after {\\n inset: 7px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"705ce682-0ceb-4df3-8773-3ea4d56e080b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"The arrow icons slide horizontally. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" hides the arrow when it moves outside the button area.","styles":{}}],"children":[]},{"id":"31d165db-8b56-4de3-8434-a25e3f350ba9","type":"procode","props":{"code":".styled-wrapper .button {\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"j1z2098mv\",\"name\":\"code\",\"code\":\".styled-wrapper .button {\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9ed4ae75-5157-48f2-9fa7-ecb580761224","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The border animations use custom cubic-bezier curves. The arrow slide uses a simple ","styles":{}},{"type":"text","text":"0.4s ease","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"5e3d8a0a-7b48-4426-b07f-57911ba56b11","type":"procode","props":{"code":".styled-wrapper .button::before {\n transition:\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\n}\n\n.styled-wrapper .button::after {\n transition:\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.styled-wrapper .button-box {\n transition: transform 0.4s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tp8cnb1hj\",\"name\":\"code\",\"code\":\".styled-wrapper .button::before {\\n transition:\\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\\n}\\n\\n.styled-wrapper .button::after {\\n transition:\\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\\n}\\n\\n.styled-wrapper .button-box {\\n transition: transform 0.4s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c6f2d51a-fe75-4cad-8df4-8e9e85bddfb4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"If the user prefers reduced motion, all button and arrow transitions are disabled.","styles":{}}],"children":[]},{"id":"5a1f8402-1081-405f-89b2-b30e4ce95494","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .styled-wrapper .button,\n .styled-wrapper .button::before,\n .styled-wrapper .button::after,\n .styled-wrapper .button-box {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"k0jw51nel\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .styled-wrapper .button,\\n .styled-wrapper .button::before,\\n .styled-wrapper .button::after,\\n .styled-wrapper .button-box {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a040717-8355-4f7d-bf48-75b0a229695a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the arrow slide speed here:","styles":{}}],"children":[]},{"id":"045bfea3-c067-45f4-8d78-1e09cadfee82","type":"procode","props":{"code":".styled-wrapper .button-box {\n transition: transform 0.4s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"5yry9q2ic\",\"name\":\"code\",\"code\":\".styled-wrapper .button-box {\\n transition: transform 0.4s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c2408e16-54ad-4493-877c-7a71ab8f378e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the circle border transition speed here:","styles":{}}],"children":[]},{"id":"3de8d4d0-bd3d-479e-8dce-05b13889d2b9","type":"procode","props":{"code":".styled-wrapper .button::before,\n.styled-wrapper .button::after {\n transition:\n opacity 0.4s,\n transform 0.5s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o8bhdwomr\",\"name\":\"code\",\"code\":\".styled-wrapper .button::before,\\n.styled-wrapper .button::after {\\n transition:\\n opacity 0.4s,\\n transform 0.5s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"60400384-e1ac-4179-81de-1fb9d091aef5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the default circle color here:","styles":{}}],"children":[]},{"id":"57f57fed-ed78-4f57-95dd-2c9846d1ba13","type":"procode","props":{"code":".styled-wrapper .button::before {\n border: 3px solid black;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fjk10ddar\",\"name\":\"code\",\"code\":\".styled-wrapper .button::before {\\n border: 3px solid black;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e00c47d-e36b-461b-8e99-9cf10ef4ce44","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover circle color here:","styles":{}}],"children":[]},{"id":"464d02ed-af3d-41df-8869-c0cccdbc4306","type":"procode","props":{"code":".styled-wrapper .button::after {\n border: 4px solid #5D3FD3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"z8a71gqyp\",\"name\":\"code\",\"code\":\".styled-wrapper .button::after {\\n border: 4px solid #5D3FD3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5cd63f7b-58e6-44bb-a1a3-0c909fe2d5a7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow color inside the SVG path.","styles":{}}],"children":[]},{"id":"f0f427b4-69b3-4baf-a2ec-42694d18f81f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"wo6om4r8v\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"729f40bd-696c-49a1-a4c9-32d8161071c8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the button size here:","styles":{}}],"children":[]},{"id":"1d34964b-f554-4c28-81f1-b4f1e8ae4288","type":"procode","props":{"code":".styled-wrapper .button {\n width: 76px;\n height: 76px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nlsfv6vwb\",\"name\":\"code\",\"code\":\".styled-wrapper .button {\\n width: 76px;\\n height: 76px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d70d9dc8-7ead-431c-a46f-fdf8da6fe701","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow size here:","styles":{}}],"children":[]},{"id":"dcaf3d1b-7c96-4ef1-a351-7e1f02a056b6","type":"procode","props":{"code":".styled-wrapper .arrow-icon {\n width: 30px;\n height: 30px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"f1f905eq3\",\"name\":\"code\",\"code\":\".styled-wrapper .arrow-icon {\\n width: 30px;\\n height: 30px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c53d71e6-25ca-4d80-813a-ec5732945fda","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the circle inset here:","styles":{}}],"children":[]},{"id":"c20d07a6-cb34-4cfd-ac31-976cf4a6901c","type":"procode","props":{"code":".styled-wrapper .button::before,\n.styled-wrapper .button::after {\n inset: 7px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"95ufjh831\",\"name\":\"code\",\"code\":\".styled-wrapper .button::before,\\n.styled-wrapper .button::after {\\n inset: 7px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e2260693-d0b4-489b-8d2b-c29ed541a59c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Movement Distance\n","styles":{"bold":true}},{"type":"text","text":"Change how far the arrow row moves here:","styles":{}}],"children":[]},{"id":"537240e4-a440-4873-8644-6b9855b8aa9d","type":"procode","props":{"code":".styled-wrapper .button:hover .button-box,\n.styled-wrapper .button:focus-visible .button-box {\n transform: translateX(-69px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"bl6bxzogr\",\"name\":\"code\",\"code\":\".styled-wrapper .button:hover .button-box,\\n.styled-wrapper .button:focus-visible .button-box {\\n transform: translateX(-69px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"04d4aece-6fa3-47be-a9e8-3743768e5e49","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]