Arrow Expand Button

[{"id":"1fd934c2-b51e-4a00-96d2-976896b8b03f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"48606a95-6f17-4c63-b127-7f314e8214a1","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.cssbuttons-io-button {\\n background: #5d3fd3;\\n color: white;\\n font-family: inherit;\\n padding: 0.35em;\\n padding-left: 1.2em;\\n font-size: 17px;\\n font-weight: 500;\\n border-radius: 999px;\\n border: none;\\n letter-spacing: 0.05em;\\n display: flex;\\n align-items: center;\\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\\n overflow: hidden;\\n position: relative;\\n height: 2.8em;\\n padding-right: 3.3em;\\n cursor: pointer;\\n}\\n\\n.cssbuttons-io-button .icon {\\n background: white;\\n margin-left: 1em;\\n position: absolute;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n height: 2.2em;\\n width: 2.2em;\\n border-radius: 999px;\\n box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;\\n right: 0.3em;\\n transition: all 0.3s;\\n}\\n\\n.cssbuttons-io-button:hover .icon {\\n width: calc(100% - 0.6em);\\n border-radius: 999px;\\n}\\n\\n.cssbuttons-io-button .icon svg {\\n width: 1.1em;\\n transition: transform 0.3s;\\n color: #7b52b9;\\n}\\n\\n.cssbuttons-io-button:hover .icon svg {\\n transform: translateX(0.1em);\\n}\\n\\n.cssbuttons-io-button:active .icon {\\n transform: scale(0.95);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .cssbuttons-io-button,\\n .cssbuttons-io-button .icon,\\n .cssbuttons-io-button .icon svg {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n 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":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"4f505e1b-9b88-47fb-873d-ecdb07eb0ec3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"bf0b9656-8db2-497c-8545-7f7b8079225a","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6759321-55eb-4c1a-beba-1574f1dc0c53","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"3b22d343-6499-4bcb-9a96-f203c83f81d4","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.cssbuttons-io-button {\\n background: #5d3fd3;\\n color: white;\\n font-family: inherit;\\n padding: 0.35em;\\n padding-left: 1.2em;\\n font-size: 17px;\\n font-weight: 500;\\n border-radius: 999px;\\n border: none;\\n letter-spacing: 0.05em;\\n display: flex;\\n align-items: center;\\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\\n overflow: hidden;\\n position: relative;\\n height: 2.8em;\\n padding-right: 3.3em;\\n cursor: pointer;\\n}\\n\\n.cssbuttons-io-button .icon {\\n background: white;\\n margin-left: 1em;\\n position: absolute;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n height: 2.2em;\\n width: 2.2em;\\n border-radius: 999px;\\n box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;\\n right: 0.3em;\\n transition: all 0.3s;\\n}\\n\\n.cssbuttons-io-button:hover .icon {\\n width: calc(100% - 0.6em);\\n border-radius: 999px;\\n}\\n\\n.cssbuttons-io-button .icon svg {\\n width: 1.1em;\\n transition: transform 0.3s;\\n color: #7b52b9;\\n}\\n\\n.cssbuttons-io-button:hover .icon svg {\\n transform: translateX(0.1em);\\n}\\n\\n.cssbuttons-io-button:active .icon {\\n transform: scale(0.95);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .cssbuttons-io-button,\\n .cssbuttons-io-button .icon,\\n .cssbuttons-io-button .icon svg {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3b856627-043c-46f6-9ca8-f6e975114650","type":"divider","props":{},"children":[]},{"id":"7addb981-6f94-4833-a8cd-717c15ae2f5d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"467f235d-9ad3-472c-96d3-17beb000b932","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 arrow expand button. It starts as a purple pill button with text and a small white circular icon on the right. On hover, the icon expands across the button.","styles":{}}],"children":[]},{"id":"57b8909c-13e1-4579-a8e8-1238078139fc","type":"procode","props":{"code":".cssbuttons-io-button {\n background: #5d3fd3;\n color: white;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"66fwqkk3v\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n background: #5d3fd3;\\n color: white;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"392a4731-27f9-485a-8b68-c14a6354ad4e","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":"6afed3d3-5d6c-4372-825c-658a4f350b1d","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kxrwqf5x5\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8fb74a73-f1ae-4f5e-a58a-beff86330d6e","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":".cssbuttons-io-button","styles":{"code":true}},{"type":"text","text":" is the main button. It uses Flexbox to align the text and icon, with extra right padding to make space for the icon.","styles":{}}],"children":[]},{"id":"4ebcaed9-0012-4d45-9c62-9cc2d9c1df44","type":"procode","props":{"code":".cssbuttons-io-button {\n background: #5d3fd3;\n color: white;\n font-family: inherit;\n padding: 0.35em;\n padding-left: 1.2em;\n font-size: 17px;\n font-weight: 500;\n border-radius: 999px;\n border: none;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\n overflow: hidden;\n position: relative;\n height: 2.8em;\n padding-right: 3.3em;\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kq343xmgf\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n background: #5d3fd3;\\n color: white;\\n font-family: inherit;\\n padding: 0.35em;\\n padding-left: 1.2em;\\n font-size: 17px;\\n font-weight: 500;\\n border-radius: 999px;\\n border: none;\\n letter-spacing: 0.05em;\\n display: flex;\\n align-items: center;\\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\\n overflow: hidden;\\n position: relative;\\n height: 2.8em;\\n padding-right: 3.3em;\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4b13086-07ab-4f7d-a103-ae61a55c93e7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"The icon is positioned absolutely inside the button, so the button needs ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"fee4b318-4979-4ac2-8585-2ebd92cd2db7","type":"procode","props":{"code":".cssbuttons-io-button {\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nmhwttx9v\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a8cca46-1e3a-4d8e-b401-d0e8bff72f8e","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 icon expands to almost the full button width on hover. ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the expanded icon clipped inside the pill shape.","styles":{}}],"children":[]},{"id":"11b76d9e-be9a-425a-afc5-5ee4ad0c54c8","type":"procode","props":{"code":".cssbuttons-io-button {\n overflow: hidden;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"16q0w6qtc\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n overflow: hidden;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3bdf8010-58af-426f-9eb3-507c479f973c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Circle Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".icon","styles":{"code":true}},{"type":"text","text":" is the white circular area on the right side. It is positioned with ","styles":{}},{"type":"text","text":"right: 0.3em","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"41fe38ad-5b08-4366-81a8-465d92b74de5","type":"procode","props":{"code":".cssbuttons-io-button .icon {\n background: white;\n margin-left: 1em;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.2em;\n width: 2.2em;\n border-radius: 999px;\n box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;\n right: 0.3em;\n transition: all 0.3s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zhmoofurq\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon {\\n background: white;\\n margin-left: 1em;\\n position: absolute;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n height: 2.2em;\\n width: 2.2em;\\n border-radius: 999px;\\n box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;\\n right: 0.3em;\\n transition: all 0.3s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8dc03b3d-bb2b-47e1-b3c1-4ee5b5df0fde","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Hover Expand\n","styles":{"bold":true}},{"type":"text","text":"On hover, the icon expands from a small circle into a wide pill that covers most of the button.","styles":{}}],"children":[]},{"id":"7b6a02a1-9091-4730-9bb1-a283560fceea","type":"procode","props":{"code":".cssbuttons-io-button:hover .icon {\n width: calc(100% - 0.6em);\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7v9d567p2\",\"name\":\"code\",\"code\":\".cssbuttons-io-button:hover .icon {\\n width: calc(100% - 0.6em);\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cdf37b02-691b-4efa-972c-1063c2521867","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow SVG Base\n","styles":{"bold":true}},{"type":"text","text":"The arrow SVG is inside the white icon circle. It uses purple color from ","styles":{}},{"type":"text","text":"color: #7b52b9","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"52028529-07d8-477c-9944-08c3eba457bd","type":"procode","props":{"code":".cssbuttons-io-button .icon svg {\n width: 1.1em;\n transition: transform 0.3s;\n color: #7b52b9;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fpmvwbrhx\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon svg {\\n width: 1.1em;\\n transition: transform 0.3s;\\n color: #7b52b9;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"47ef755c-e287-410c-affa-8d211a73228f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Hover Movement\n","styles":{"bold":true}},{"type":"text","text":"On hover, the arrow moves slightly to the right.","styles":{}}],"children":[]},{"id":"9db75431-5c87-474f-b181-f074cddb1e54","type":"procode","props":{"code":".cssbuttons-io-button:hover .icon svg {\n transform: translateX(0.1em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"14vm0vth5\",\"name\":\"code\",\"code\":\".cssbuttons-io-button:hover .icon svg {\\n transform: translateX(0.1em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"907c1337-329f-4bf3-9d1f-c3b216e8056e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Pressed State\n","styles":{"bold":true}},{"type":"text","text":"When clicked, only the icon scales down slightly.","styles":{}}],"children":[]},{"id":"8e8ace52-dc18-49c8-ab65-6fd77b1231b1","type":"procode","props":{"code":".cssbuttons-io-button:active .icon {\n transform: scale(0.95);\n}","language":"javascript","filename":"","files":"[{\"id\":\"id7r6dnrh\",\"name\":\"code\",\"code\":\".cssbuttons-io-button:active .icon {\\n transform: scale(0.95);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"061fdb04-9191-4a96-b57c-956703677c74","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 white icon expands across the purple button, and the arrow shifts slightly.","styles":{}}],"children":[]},{"id":"b1dab081-2e6a-4785-9d5f-4d63ae072c6d","type":"procode","props":{"code":".cssbuttons-io-button:hover .icon {\n width: calc(100% - 0.6em);\n border-radius: 999px;\n}\n\n.cssbuttons-io-button:hover .icon svg {\n transform: translateX(0.1em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"iqzproph1\",\"name\":\"code\",\"code\":\".cssbuttons-io-button:hover .icon {\\n width: calc(100% - 0.6em);\\n border-radius: 999px;\\n}\\n\\n.cssbuttons-io-button:hover .icon svg {\\n transform: translateX(0.1em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"758112da-53b5-43d1-9bc7-25ee1e514c4b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"padding-right: 3.3em","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The text needs space so it does not overlap the icon circle before hover.","styles":{}}],"children":[]},{"id":"41ac2159-3e5c-4540-8891-814f0079c709","type":"procode","props":{"code":".cssbuttons-io-button {\n padding-right: 3.3em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tvyuodxgm\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n padding-right: 3.3em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"39126c67-128e-4871-96f0-48343e74f88f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"calc(100% - 0.6em)","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The expanded icon needs to fit inside the button while keeping ","styles":{}},{"type":"text","text":"0.3em","styles":{"code":true}},{"type":"text","text":" spacing on both sides.","styles":{}}],"children":[]},{"id":"c627c6a5-3a37-4a20-84d4-e52146692c5c","type":"procode","props":{"code":".cssbuttons-io-button:hover .icon {\n width: calc(100% - 0.6em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"iie3e148g\",\"name\":\"code\",\"code\":\".cssbuttons-io-button:hover .icon {\\n width: calc(100% - 0.6em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e75cd4c-7953-43b2-b2a9-014b6eb75050","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The icon expands with ","styles":{}},{"type":"text","text":"transition: all 0.3s","styles":{"code":true}},{"type":"text","text":", and the SVG arrow movement uses ","styles":{}},{"type":"text","text":"transform 0.3s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"6c8773cc-3dac-476f-903c-336670ed1004","type":"procode","props":{"code":".cssbuttons-io-button .icon {\n transition: all 0.3s;\n}\n\n.cssbuttons-io-button .icon svg {\n transition: transform 0.3s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jzq31mo85\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon {\\n transition: all 0.3s;\\n}\\n\\n.cssbuttons-io-button .icon svg {\\n transition: transform 0.3s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"22b83ee5-832b-4176-b30e-e82173af98de","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, transitions are removed.","styles":{}}],"children":[]},{"id":"50d8689f-6609-4d04-ba84-3013a186778a","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .cssbuttons-io-button,\n .cssbuttons-io-button .icon,\n .cssbuttons-io-button .icon svg {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"qri5x7ehj\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .cssbuttons-io-button,\\n .cssbuttons-io-button .icon,\\n .cssbuttons-io-button .icon svg {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c548d917-7480-4bf8-9c71-e1dcc97b895b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the icon expansion speed here:","styles":{}}],"children":[]},{"id":"399221c3-fd3e-4800-b298-42b13f65c8b6","type":"procode","props":{"code":".cssbuttons-io-button .icon {\n transition: all 0.3s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"audutbd6b\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon {\\n transition: all 0.3s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca939613-762f-49fa-a68d-a983d128264d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow movement speed here:","styles":{}}],"children":[]},{"id":"66e6b4cf-c4b9-41d6-b8dc-fc7a5296cf69","type":"procode","props":{"code":".cssbuttons-io-button .icon svg {\n transition: transform 0.3s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"p2d5hwjt2\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon svg {\\n transition: transform 0.3s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb83d03c-d4ea-4fff-8a57-20532b326b5f","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":"9679a3f7-7905-41d0-b156-558023f02380","type":"procode","props":{"code":".cssbuttons-io-button {\n background: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1gqe1gars\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n background: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e7986af3-07e5-4ab6-9dc4-87bded181c54","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon background here:","styles":{}}],"children":[]},{"id":"632a3732-566c-40e9-8525-4501fad389db","type":"procode","props":{"code":".cssbuttons-io-button .icon {\n background: white;\n}","language":"javascript","filename":"","files":"[{\"id\":\"r8f5anyji\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon {\\n background: white;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b872e6d7-5f7b-42c5-9965-6b6a2d109799","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow color here:","styles":{}}],"children":[]},{"id":"14ebbb3c-df8a-4042-9b7b-5024f41eebf4","type":"procode","props":{"code":".cssbuttons-io-button .icon svg {\n color: #7b52b9;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m0t3ut9q6\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon svg {\\n color: #7b52b9;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f3463cb-ad2b-4a05-8f5f-f476bfe413e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the inner shadow color here:","styles":{}}],"children":[]},{"id":"e042d45f-edf2-4d0a-b515-fcbf84cd3071","type":"procode","props":{"code":".cssbuttons-io-button {\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vvffu47td\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9575b84c-1428-4326-9090-885fb93ec35f","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 height here:","styles":{}}],"children":[]},{"id":"b216df7e-c825-42ec-a475-4e7b276e87a0","type":"procode","props":{"code":".cssbuttons-io-button {\n height: 2.8em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uzdxj7mvp\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n height: 2.8em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9ffc757f-39f4-4fe1-bfcb-44101d9636d4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button roundness here:","styles":{}}],"children":[]},{"id":"c3237c6d-6251-4e37-b0d0-cf97a7769e09","type":"procode","props":{"code":".cssbuttons-io-button {\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"k1e4rw30w\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e8980a0-c360-4ea5-8484-e288049ca895","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon size here:","styles":{}}],"children":[]},{"id":"76bbbf86-47c7-4514-aca9-cd6a3a8b0452","type":"procode","props":{"code":".cssbuttons-io-button .icon {\n height: 2.2em;\n width: 2.2em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hwqqk1il1\",\"name\":\"code\",\"code\":\".cssbuttons-io-button .icon {\\n height: 2.2em;\\n width: 2.2em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"32a6e26a-1aa6-4db3-a207-f6d23c84f1f3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"4e3ce7c5-3526-40f3-982a-33474e43999d","type":"procode","props":{"code":".cssbuttons-io-button {\n font-size: 17px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qqv18att0\",\"name\":\"code\",\"code\":\".cssbuttons-io-button {\\n font-size: 17px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a3c94ef-6296-43ce-a51c-c9352b5cf5f6","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":"d62925da-37a6-4be7-b2f5-23541c6f187b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"62bsfnoq4\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e0b34cbb-0470-4307-9557-47336840adcd","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon / Content\n","styles":{"bold":true}},{"type":"text","text":"The arrow icon is an inline SVG path.","styles":{}}],"children":[]},{"id":"4ffe0b07-946a-4d4d-98bc-49a17dfaae2f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"780aokr0l\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e719dcb4-80e3-4f02-b2a3-a8dcb42136f0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]