Arrow Button top right

[{"id":"752815df-db32-4ef4-805f-87a59facf22f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7c97cd8f-0c25-42af-be28-2ee9fc0469e6","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-color: #000;\\n --button-hover-color: #000000;\\n --button-text-color: #ffffff;\\n --icon-bg-color: #ffffff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button {\\n display: inline-flex;\\n align-items: center;\\n gap: 0.75rem;\\n\\n padding: 0.75rem 1.5rem;\\n padding-left: 20px;\\n\\n border: none;\\n border-radius: 10rem;\\n background: var(--button-color);\\n color: var(--button-text-color);\\n\\n font-size: 16px;\\n font-weight: 600;\\n line-height: 1;\\n text-decoration: none;\\n white-space: nowrap;\\n\\n overflow: hidden;\\n text-overflow: ellipsis;\\n\\n cursor: pointer;\\n\\n transition:\\n background 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.button:hover {\\n background: var(--button-hover-color);\\n}\\n\\n.button:active {\\n transform: scale(0.96);\\n}\\n\\n.button__icon-wrapper {\\n flex-shrink: 0;\\n\\n width: 25px;\\n height: 25px;\\n\\n position: relative;\\n\\n display: grid;\\n place-items: center;\\n\\n color: var(--button-color);\\n background: var(--icon-bg-color);\\n border-radius: 50%;\\n\\n overflow: hidden;\\n\\n transition: color 0.3s ease;\\n}\\n\\n.button:hover .button__icon-wrapper {\\n color: var(--button-hover-color);\\n}\\n\\n.button__icon-svg {\\n transition: transform 0.35s ease-in-out;\\n}\\n\\n.button__icon-svg--copy {\\n position: absolute;\\n transform: translate(-150%, 150%);\\n}\\n\\n.button:hover .button__icon-svg:first-child {\\n transform: translate(150%, -150%);\\n}\\n\\n.button:hover .button__icon-svg--copy {\\n transform: translate(0);\\n transition-delay: 0.1s;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Arrow Button top right\\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":"6a22b219-5f40-4c76-95b7-912c25670050","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3d1d65dd-8d81-4de9-8d7e-d21236482a9e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"200ae953-bb54-43b2-b440-ae65e6f08e55","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c14010ee-709d-4462-bd20-7afc121c8f7b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"9963c7ea-316b-4706-a107-bc92fbeecab0","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-color: #000;\\n --button-hover-color: #000000;\\n --button-text-color: #ffffff;\\n --icon-bg-color: #ffffff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button {\\n display: inline-flex;\\n align-items: center;\\n gap: 0.75rem;\\n\\n padding: 0.75rem 1.5rem;\\n padding-left: 20px;\\n\\n border: none;\\n border-radius: 10rem;\\n background: var(--button-color);\\n color: var(--button-text-color);\\n\\n font-size: 16px;\\n font-weight: 600;\\n line-height: 1;\\n text-decoration: none;\\n white-space: nowrap;\\n\\n overflow: hidden;\\n text-overflow: ellipsis;\\n\\n cursor: pointer;\\n\\n transition:\\n background 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.button:hover {\\n background: var(--button-hover-color);\\n}\\n\\n.button:active {\\n transform: scale(0.96);\\n}\\n\\n.button__icon-wrapper {\\n flex-shrink: 0;\\n\\n width: 25px;\\n height: 25px;\\n\\n position: relative;\\n\\n display: grid;\\n place-items: center;\\n\\n color: var(--button-color);\\n background: var(--icon-bg-color);\\n border-radius: 50%;\\n\\n overflow: hidden;\\n\\n transition: color 0.3s ease;\\n}\\n\\n.button:hover .button__icon-wrapper {\\n color: var(--button-hover-color);\\n}\\n\\n.button__icon-svg {\\n transition: transform 0.35s ease-in-out;\\n}\\n\\n.button__icon-svg--copy {\\n position: absolute;\\n transform: translate(-150%, 150%);\\n}\\n\\n.button:hover .button__icon-svg:first-child {\\n transform: translate(150%, -150%);\\n}\\n\\n.button:hover .button__icon-svg--copy {\\n transform: translate(0);\\n transition-delay: 0.1s;\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69a5b6fe-fabb-4d08-ae6f-9bb2050c3b3d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a2bc4fc6-5e9f-4222-94bf-64c05c9fa76b","type":"divider","props":{},"children":[]},{"id":"7c959530-d21e-4192-b322-1eef93971979","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"cb911bbc-828b-4cea-9e01-06dbfb102be3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is an ","styles":{}},{"type":"text","text":"Explore All","styles":{"code":true}},{"type":"text","text":" pill button. It uses a black button background, white text, and a white circular icon wrapper.","styles":{}}],"children":[]},{"id":"10481921-5bb4-49b2-9f76-3898a6cf7121","type":"procode","props":{"code":":root {\n --button-color: #000;\n --button-hover-color: #000000;\n --button-text-color: #ffffff;\n --icon-bg-color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ib6d8qhng\",\"name\":\"code\",\"code\":\":root {\\n --button-color: #000;\\n --button-hover-color: #000000;\\n --button-text-color: #ffffff;\\n --icon-bg-color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8436b664-dd7c-4fec-9f4e-1fd9879007f6","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":"9e776989-fa60-47da-9b0c-31f541e1f2ed","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gcz8k5r3i\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1ca37675-9e7c-4cd8-b453-4081849b8430","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":" uses ","styles":{}},{"type":"text","text":"inline-flex","styles":{"code":true}},{"type":"text","text":" so the icon circle and text sit in one horizontal row.","styles":{}}],"children":[]},{"id":"39909732-2a39-40a2-8729-189ff5b005f2","type":"procode","props":{"code":".button {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n\n padding: 0.75rem 1.5rem;\n padding-left: 20px;\n\n border: none;\n border-radius: 10rem;\n background: var(--button-color);\n color: var(--button-text-color);\n\n font-size: 16px;\n font-weight: 600;\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lzbno30il\",\"name\":\"code\",\"code\":\".button {\\n display: inline-flex;\\n align-items: center;\\n gap: 0.75rem;\\n\\n padding: 0.75rem 1.5rem;\\n padding-left: 20px;\\n\\n border: none;\\n border-radius: 10rem;\\n background: var(--button-color);\\n color: var(--button-text-color);\\n\\n font-size: 16px;\\n font-weight: 600;\\n line-height: 1;\\n text-decoration: none;\\n white-space: nowrap;\\n\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6b9f08f7-1a7e-4401-9534-c36c16c529c6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Overflow\n","styles":{"bold":true}},{"type":"text","text":"The button uses ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"text-overflow: ellipsis","styles":{"code":true}},{"type":"text","text":". This keeps the pill clean if the content becomes too long.","styles":{}}],"children":[]},{"id":"3c624ef4-5d99-4a85-8eb1-aae72c351ae5","type":"procode","props":{"code":".button {\n overflow: hidden;\n text-overflow: ellipsis;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jr8m0f7ye\",\"name\":\"code\",\"code\":\".button {\\n overflow: hidden;\\n text-overflow: ellipsis;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"17483680-7ca0-464b-bd08-ad6bafdb8cd9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the button background changes to ","styles":{}},{"type":"text","text":"--button-hover-color","styles":{"code":true}},{"type":"text","text":". In this exact version, both default and hover colors are black, so the visual background stays the same.","styles":{}}],"children":[]},{"id":"b8eb3448-c442-4424-a250-eb07629874dd","type":"procode","props":{"code":".button:hover {\n background: var(--button-hover-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"q9quw5d7u\",\"name\":\"code\",\"code\":\".button:hover {\\n background: var(--button-hover-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0112f973-87f9-4f86-9b98-7564da97f61e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Active State\n","styles":{"bold":true}},{"type":"text","text":"On click, the whole button scales down slightly. This creates a pressed feeling.","styles":{}}],"children":[]},{"id":"4b57b925-9cdb-4157-ab3e-3f06a2371e41","type":"procode","props":{"code":".button:active {\n transform: scale(0.96);\n}","language":"javascript","filename":"","files":"[{\"id\":\"l24d3k6yt\",\"name\":\"code\",\"code\":\".button:active {\\n transform: scale(0.96);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d65b952a-05c1-4354-afa6-89753bd41982","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Wrapper\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button__icon-wrapper","styles":{"code":true}},{"type":"text","text":" is the white circular area around the arrow icon. It uses ","styles":{}},{"type":"text","text":"display: grid","styles":{"code":true}},{"type":"text","text":" to center the SVG.","styles":{}}],"children":[]},{"id":"0ea41e9f-31dd-4672-84ff-2bd3a6635717","type":"procode","props":{"code":".button__icon-wrapper {\n flex-shrink: 0;\n\n width: 25px;\n height: 25px;\n\n position: relative;\n\n display: grid;\n place-items: center;\n\n color: var(--button-color);\n background: var(--icon-bg-color);\n border-radius: 50%;\n\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ew2g3tqnc\",\"name\":\"code\",\"code\":\".button__icon-wrapper {\\n flex-shrink: 0;\\n\\n width: 25px;\\n height: 25px;\\n\\n position: relative;\\n\\n display: grid;\\n place-items: center;\\n\\n color: var(--button-color);\\n background: var(--icon-bg-color);\\n border-radius: 50%;\\n\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01299098-c8e2-4ffc-9e73-4bbaf6e67b3a","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":"There are two arrow icons inside the same circular wrapper. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" hides the icon while it moves outside the circle.","styles":{}}],"children":[]},{"id":"fcf98d6b-6737-4955-bb3f-9e28c71a8f74","type":"procode","props":{"code":".button__icon-wrapper {\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nh9rgvrfr\",\"name\":\"code\",\"code\":\".button__icon-wrapper {\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0968ecfe-4ebb-4c9d-b7b8-82818fa7696c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Color Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the icon wrapper color changes to the hover color. The SVG path uses ","styles":{}},{"type":"text","text":"currentColor","styles":{"code":true}},{"type":"text","text":", so the icon follows this color.","styles":{}}],"children":[]},{"id":"487b593f-a6e4-41ab-a7ef-6693be5b4b91","type":"procode","props":{"code":".button:hover .button__icon-wrapper {\n color: var(--button-hover-color);\n}","language":"javascript","filename":"","files":"[{\"id\":\"fysd9rpyd\",\"name\":\"code\",\"code\":\".button:hover .button__icon-wrapper {\\n color: var(--button-hover-color);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7251e690-9641-4d35-a859-10728fe033d4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SVG Icon Base\n","styles":{"bold":true}},{"type":"text","text":"Both SVG icons use the same arrow shape. The movement is animated using ","styles":{}},{"type":"text","text":"transform","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b539f70b-7de4-4661-92da-1ac0d88fada7","type":"procode","props":{"code":".button__icon-svg {\n transition: transform 0.35s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uioimxhb7\",\"name\":\"code\",\"code\":\".button__icon-svg {\\n transition: transform 0.35s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"afc43a01-8921-425d-bd8d-a118d8343624","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Copied Icon Start Position\n","styles":{"bold":true}},{"type":"text","text":"The second SVG starts outside the circle at the bottom-left area.","styles":{}}],"children":[]},{"id":"97883346-8de2-4413-a93b-7b153700e8ee","type":"procode","props":{"code":".button__icon-svg--copy {\n position: absolute;\n transform: translate(-150%, 150%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"494wtxmgc\",\"name\":\"code\",\"code\":\".button__icon-svg--copy {\\n position: absolute;\\n transform: translate(-150%, 150%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf818ffc-74a2-400a-a733-fa5a402623f9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"First Icon Hover Movement\n","styles":{"bold":true}},{"type":"text","text":"On hover, the first arrow moves out toward the top-right.","styles":{}}],"children":[]},{"id":"bf4a4da3-ce94-4ee9-ac6e-e09b6d587bd1","type":"procode","props":{"code":".button:hover .button__icon-svg:first-child {\n transform: translate(150%, -150%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"x91fnp5z0\",\"name\":\"code\",\"code\":\".button:hover .button__icon-svg:first-child {\\n transform: translate(150%, -150%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"64f8a7c6-60fb-4729-9a7b-caca8142441a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Second Icon Hover Movement\n","styles":{"bold":true}},{"type":"text","text":"On hover, the copied arrow moves into the center of the circle. It has a small delay, so it enters after the first icon starts leaving.","styles":{}}],"children":[]},{"id":"fab8e5a4-76b0-4ebf-9433-9b9af5d9fe5d","type":"procode","props":{"code":".button:hover .button__icon-svg--copy {\n transform: translate(0);\n transition-delay: 0.1s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ai6un4m67\",\"name\":\"code\",\"code\":\".button:hover .button__icon-svg--copy {\\n transform: translate(0);\\n transition-delay: 0.1s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ef015825-0eb2-4443-8847-dc93add1bcd0","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 animation flow. The first arrow exits the circle, and the copied arrow enters from the opposite direction.","styles":{}}],"children":[]},{"id":"54e5cac4-5e58-45af-b9c8-bf24303b286e","type":"procode","props":{"code":".button__icon-svg--copy {\n position: absolute;\n transform: translate(-150%, 150%);\n}\n\n.button:hover .button__icon-svg:first-child {\n transform: translate(150%, -150%);\n}\n\n.button:hover .button__icon-svg--copy {\n transform: translate(0);\n transition-delay: 0.1s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x2ohq21m9\",\"name\":\"code\",\"code\":\".button__icon-svg--copy {\\n position: absolute;\\n transform: translate(-150%, 150%);\\n}\\n\\n.button:hover .button__icon-svg:first-child {\\n transform: translate(150%, -150%);\\n}\\n\\n.button:hover .button__icon-svg--copy {\\n transform: translate(0);\\n transition-delay: 0.1s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"332abb39-2c02-41d4-835a-1553b916949f","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 animation needs one arrow to leave and another arrow to enter. That creates a continuous arrow-swipe effect inside the icon circle.","styles":{}}],"children":[]},{"id":"998ee54c-69f0-492c-9272-5d5b03072e77","type":"procode","props":{"code":"\n \n\n \n","language":"javascript","filename":"","files":"[{\"id\":\"jszxcpex5\",\"name\":\"code\",\"code\":\"\\n \\n\\n \\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8d682d85-8884-45f6-bf3a-6a53085380ff","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"currentColor","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The SVG path uses ","styles":{}},{"type":"text","text":"fill=\"currentColor\"","styles":{"code":true}},{"type":"text","text":". This means the icon color comes from the CSS ","styles":{}},{"type":"text","text":"color","styles":{"code":true}},{"type":"text","text":" property on the wrapper.","styles":{}}],"children":[]},{"id":"84818a0f-9e9a-4445-aebb-f472e982790d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"p6qqz775i\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"338d97c5-4408-4bd3-ba79-e09049b53056","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button background and scale use ","styles":{}},{"type":"text","text":"0.3s ease","styles":{"code":true}},{"type":"text","text":". The arrow icons move with ","styles":{}},{"type":"text","text":"0.35s ease-in-out","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"566fe0f9-8be9-401a-91b9-33f0606c7c22","type":"procode","props":{"code":".button {\n transition:\n background 0.3s ease,\n transform 0.3s ease;\n}\n\n.button__icon-svg {\n transition: transform 0.35s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kxw7rji5d\",\"name\":\"code\",\"code\":\".button {\\n transition:\\n background 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.button__icon-svg {\\n transition: transform 0.35s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"398bd90b-9607-4a42-b0ea-5d0cb9a391de","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the button animation speed here:","styles":{}}],"children":[]},{"id":"b9c2779e-a2d5-4ccd-b797-56de7cac7963","type":"procode","props":{"code":".button {\n transition:\n background 0.3s ease,\n transform 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0aul3q1xn\",\"name\":\"code\",\"code\":\".button {\\n transition:\\n background 0.3s ease,\\n transform 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"76758d45-8f0b-4b4e-a0e4-2fff7288b44e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow swipe speed here:","styles":{}}],"children":[]},{"id":"a2da9c0e-d0a4-440a-835f-646c558e88b6","type":"procode","props":{"code":".button__icon-svg {\n transition: transform 0.35s ease-in-out;\n}","language":"javascript","filename":"","files":"[{\"id\":\"t95q3u5ci\",\"name\":\"code\",\"code\":\".button__icon-svg {\\n transition: transform 0.35s ease-in-out;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4e4e0fed-d4ce-4622-ade5-0edd6e9d2030","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the button background here:","styles":{}}],"children":[]},{"id":"e249e9f1-278e-47ba-89b5-53ac63dfc218","type":"procode","props":{"code":":root {\n --button-color: #000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"k6hhjh9o0\",\"name\":\"code\",\"code\":\":root {\\n --button-color: #000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f41c1df5-8af5-49fb-b895-0dae5896891f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover background and hover icon color here:","styles":{}}],"children":[]},{"id":"cf09b181-c362-4c89-82c4-68b8433b121a","type":"procode","props":{"code":":root {\n --button-hover-color: #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"e34zof66z\",\"name\":\"code\",\"code\":\":root {\\n --button-hover-color: #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85eef2c6-f2a3-45fa-a48e-28046f4fdff6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text color here:","styles":{}}],"children":[]},{"id":"2203db8b-5f1e-461d-b649-388bc0ae49da","type":"procode","props":{"code":":root {\n --button-text-color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7vrfrtlis\",\"name\":\"code\",\"code\":\":root {\\n --button-text-color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"624b046e-f44a-4df8-a3b5-e5411e0212ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon circle background here:","styles":{}}],"children":[]},{"id":"b8f7c9f7-aef6-42c9-a387-62d6b7f966ba","type":"procode","props":{"code":":root {\n --icon-bg-color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6z6dghaqm\",\"name\":\"code\",\"code\":\":root {\\n --icon-bg-color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93ad5d61-9af0-4fc3-9d80-0ef55a2df970","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 padding here:","styles":{}}],"children":[]},{"id":"f3071deb-0e3a-436d-a96e-4d3af5da6597","type":"procode","props":{"code":".button {\n padding: 0.75rem 1.5rem;\n padding-left: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7smg2vinh\",\"name\":\"code\",\"code\":\".button {\\n padding: 0.75rem 1.5rem;\\n padding-left: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"302bd388-26ba-4d63-87dc-a14d71f1b7a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pill shape here:","styles":{}}],"children":[]},{"id":"23e35818-f118-4055-baa1-a0c9070ed228","type":"procode","props":{"code":".button {\n border-radius: 10rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lz3f442zp\",\"name\":\"code\",\"code\":\".button {\\n border-radius: 10rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"538f596e-6c8e-4c45-9a49-b11208c02ecc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon circle size here:","styles":{}}],"children":[]},{"id":"543ed183-1816-4847-9fd4-6d76e2464783","type":"procode","props":{"code":".button__icon-wrapper {\n width: 25px;\n height: 25px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9m1tlun08\",\"name\":\"code\",\"code\":\".button__icon-wrapper {\\n width: 25px;\\n height: 25px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"14a21a51-28f2-41eb-a9b2-99e7ccbc6306","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the SVG icon size inside the HTML:","styles":{}}],"children":[]},{"id":"6bf18cc9-8185-4f00-a412-3764ed90b89a","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"","url":"data:image/svg+xml;utf8,%3Csvg%20class%3D%22button__icon-svg%22%20width%3D%2210%22%3E%3C%2Fsvg%3E","caption":"","showPreview":true},"children":[]},{"id":"a0bda6f5-24d2-42b3-8d08-ed73fffe5887","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the button text inside ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"31493338-a900-4056-8816-f2496d45a007","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"d5qmv9jfq\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8ae7ad5e-17c6-4a8d-8933-cb55c8e08873","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]