Purple Arrow Button Hover

[{"id":"8dcd9ed3-a513-4863-86bf-dc8d91728500","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e6626199-7c04-4434-9ddc-fc7eb0f88381","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.button-wrapper {\\n position: relative;\\n width: 56px;\\n height: 56px;\\n overflow-x: visible;\\n overflow-y: clip;\\n text-align: center;\\n cursor: pointer;\\n}\\n\\n.button-circle {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 56px;\\n height: 56px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: 999px;\\n background: #7c3aed;\\n color: #ffffff;\\n transform: scale(1);\\n transform-origin: top;\\n transition: transform 0.3s ease;\\n}\\n\\n.arrow-icon {\\n display: block;\\n width: 26px;\\n height: 26px;\\n fill: #ffffff;\\n}\\n\\n.button-wrapper:hover .button-circle {\\n transform: scale(0.6);\\n}\\n\\n.button-text {\\n position: absolute;\\n left: 50%;\\n bottom: -40px;\\n transform: translateX(-50%);\\n color: #7c3aed;\\n font-size: 14px;\\n font-weight: 700;\\n line-height: 1;\\n white-space: nowrap;\\n text-align: center;\\n transition: bottom 0.3s ease;\\n}\\n\\n.button-wrapper:hover .button-text {\\n bottom: 0;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button-circle,\\n .button-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Purple Arrow Button Hover\\n \\n \\n \\n

\\n

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

\\n\\n

Button

\\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"1c059517-8fdd-410f-b288-cc77e193c77f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"d66b8035-9658-4f2e-a791-c368743b685f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

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

\\n\\n

Button

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"95540a7b-c95f-4602-ae5e-5e9ea3538248","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"8b4ceecc-0118-4619-9ee9-f3301527ec2b","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.button-wrapper {\\n position: relative;\\n width: 56px;\\n height: 56px;\\n overflow-x: visible;\\n overflow-y: clip;\\n text-align: center;\\n cursor: pointer;\\n}\\n\\n.button-circle {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 56px;\\n height: 56px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: 999px;\\n background: #7c3aed;\\n color: #ffffff;\\n transform: scale(1);\\n transform-origin: top;\\n transition: transform 0.3s ease;\\n}\\n\\n.arrow-icon {\\n display: block;\\n width: 26px;\\n height: 26px;\\n fill: #ffffff;\\n}\\n\\n.button-wrapper:hover .button-circle {\\n transform: scale(0.6);\\n}\\n\\n.button-text {\\n position: absolute;\\n left: 50%;\\n bottom: -40px;\\n transform: translateX(-50%);\\n color: #7c3aed;\\n font-size: 14px;\\n font-weight: 700;\\n line-height: 1;\\n white-space: nowrap;\\n text-align: center;\\n transition: bottom 0.3s ease;\\n}\\n\\n.button-wrapper:hover .button-text {\\n bottom: 0;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button-circle,\\n .button-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"090d6d7e-8211-4f11-be63-1ad3092ec4c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8bf7a054-a33b-49ff-bb7e-2491e1939052","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2986e836-c8ef-405c-a55e-0c1ee572a688","type":"divider","props":{},"children":[]},{"id":"14a3dffd-f881-4f5f-8232-954d2fa457e3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"98585309-b45f-48f0-b3fa-9018da616696","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 purple arrow hover button. It starts as a purple circular icon button, then on hover the circle shrinks upward and the text slides up from below.","styles":{}}],"children":[]},{"id":"62652ce0-a76c-4753-9fe2-a416422b3c0e","type":"procode","props":{"code":".button-circle {\n background: #7c3aed;\n color: #ffffff;\n}\n\n.button-text {\n color: #7c3aed;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s6fed75tp\",\"name\":\"code\",\"code\":\".button-circle {\\n background: #7c3aed;\\n color: #ffffff;\\n}\\n\\n.button-text {\\n color: #7c3aed;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"29749088-5bf4-4e70-b936-e45589c6e080","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":"7e16d048-fe29-4891-8e25-a24455024a3f","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fybd924gp\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a31ee3fa-c844-4ef4-9983-0ca63d8458d9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Wrapper\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-wrapper","styles":{"code":true}},{"type":"text","text":" is the hover area. It has a fixed ","styles":{}},{"type":"text","text":"56px","styles":{"code":true}},{"type":"text","text":" size and clips only the vertical overflow, so the text can slide from below.","styles":{}}],"children":[]},{"id":"6d9f4c3e-b1e4-48b1-acb7-3334bad9df05","type":"procode","props":{"code":".button-wrapper {\n position: relative;\n width: 56px;\n height: 56px;\n overflow-x: visible;\n overflow-y: clip;\n text-align: center;\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"iapn05pyv\",\"name\":\"code\",\"code\":\".button-wrapper {\\n position: relative;\\n width: 56px;\\n height: 56px;\\n overflow-x: visible;\\n overflow-y: clip;\\n text-align: center;\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"abcddd10-26c8-4cb9-8462-c4cb0083a2cc","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 circle and text are positioned absolutely inside the wrapper, so ","styles":{}},{"type":"text","text":".button-wrapper","styles":{"code":true}},{"type":"text","text":" needs ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"ffef4c82-3a10-4353-9e1c-82ba65137342","type":"procode","props":{"code":".button-wrapper {\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"sipyph8gh\",\"name\":\"code\",\"code\":\".button-wrapper {\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cb6d1133-cff6-491a-a906-df9cf8d55036","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"overflow-y: clip","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The text starts below the wrapper at ","styles":{}},{"type":"text","text":"bottom: -40px","styles":{"code":true}},{"type":"text","text":". ","styles":{}},{"type":"text","text":"overflow-y: clip","styles":{"code":true}},{"type":"text","text":" hides it until hover.","styles":{}}],"children":[]},{"id":"96fd0dde-f7d6-4dbe-9594-cdb84b64e234","type":"procode","props":{"code":".button-wrapper {\n overflow-x: visible;\n overflow-y: clip;\n}","language":"javascript","filename":"","files":"[{\"id\":\"n3ffm7ufj\",\"name\":\"code\",\"code\":\".button-wrapper {\\n overflow-x: visible;\\n overflow-y: clip;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d018752c-eb68-4e11-aca7-85109e989d64","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Circle Button\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-circle","styles":{"code":true}},{"type":"text","text":" creates the purple round icon area. It is ","styles":{}},{"type":"text","text":"56px","styles":{"code":true}},{"type":"text","text":" by ","styles":{}},{"type":"text","text":"56px","styles":{"code":true}},{"type":"text","text":", fully rounded, and centered with Flexbox.","styles":{}}],"children":[]},{"id":"c954b8ed-ea63-4791-85ac-a510ce6ac81f","type":"procode","props":{"code":".button-circle {\n position: absolute;\n top: 0;\n left: 0;\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 999px;\n background: #7c3aed;\n color: #ffffff;\n transform: scale(1);\n transform-origin: top;\n transition: transform 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kfnp6y54h\",\"name\":\"code\",\"code\":\".button-circle {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 56px;\\n height: 56px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: 999px;\\n background: #7c3aed;\\n color: #ffffff;\\n transform: scale(1);\\n transform-origin: top;\\n transition: transform 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c529ffd-414c-4599-bc66-2cf716e7e30d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Icon\n","styles":{"bold":true}},{"type":"text","text":"The SVG arrow is white and sized to ","styles":{}},{"type":"text","text":"26px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"305c68f7-24ad-42f2-a246-4546de80df61","type":"procode","props":{"code":".arrow-icon {\n display: block;\n width: 26px;\n height: 26px;\n fill: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8t5afes6g\",\"name\":\"code\",\"code\":\".arrow-icon {\\n display: block;\\n width: 26px;\\n height: 26px;\\n fill: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"682d9133-23d4-44a2-aaa1-661eeaa2cdd3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Circle Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the circle scales down to ","styles":{}},{"type":"text","text":"0.6","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"2d4bc35b-7a69-4b5b-8f10-fb5ad381de01","type":"procode","props":{"code":".button-wrapper:hover .button-circle {\n transform: scale(0.6);\n}","language":"javascript","filename":"","files":"[{\"id\":\"uaoyzix33\",\"name\":\"code\",\"code\":\".button-wrapper:hover .button-circle {\\n transform: scale(0.6);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"719de964-3170-4af8-8ff4-4bc1cf112e96","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"transform-origin: top","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The circle scales from the top, so it feels like it shrinks upward instead of shrinking equally from the center.","styles":{}}],"children":[]},{"id":"faaf14fe-c7e2-4e8d-8c2e-7d1006d26d8d","type":"procode","props":{"code":".button-circle {\n transform-origin: top;\n}","language":"javascript","filename":"","files":"[{\"id\":\"q8qtpa7gj\",\"name\":\"code\",\"code\":\".button-circle {\\n transform-origin: top;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"441782a4-9e60-4abd-abdd-06640ed18da8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Base State\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-text","styles":{"code":true}},{"type":"text","text":" starts below the visible wrapper using ","styles":{}},{"type":"text","text":"bottom: -40px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"65cca79c-83a8-4e62-9cb6-9769f0b17d0b","type":"procode","props":{"code":".button-text {\n position: absolute;\n left: 50%;\n bottom: -40px;\n transform: translateX(-50%);\n color: #7c3aed;\n font-size: 14px;\n font-weight: 700;\n line-height: 1;\n white-space: nowrap;\n text-align: center;\n transition: bottom 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"cds9fb6tg\",\"name\":\"code\",\"code\":\".button-text {\\n position: absolute;\\n left: 50%;\\n bottom: -40px;\\n transform: translateX(-50%);\\n color: #7c3aed;\\n font-size: 14px;\\n font-weight: 700;\\n line-height: 1;\\n white-space: nowrap;\\n text-align: center;\\n transition: bottom 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"517ad3ed-f17a-4b38-a32a-8690b56f6c20","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the text moves up to ","styles":{}},{"type":"text","text":"bottom: 0","styles":{"code":true}},{"type":"text","text":", making it appear from below.","styles":{}}],"children":[]},{"id":"f015865a-4dfc-44c8-a7a2-89e1d49f8e68","type":"procode","props":{"code":".button-wrapper:hover .button-text {\n bottom: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"htkjnqan5\",\"name\":\"code\",\"code\":\".button-wrapper:hover .button-text {\\n bottom: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"037949eb-55c0-41bb-bb19-dd7207a7455c","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 circle shrinks, and the text slides up.","styles":{}}],"children":[]},{"id":"5877b1c4-b167-4f9f-8e91-0d9bd2524b39","type":"procode","props":{"code":".button-wrapper:hover .button-circle {\n transform: scale(0.6);\n}\n\n.button-wrapper:hover .button-text {\n bottom: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yq41wzlg6\",\"name\":\"code\",\"code\":\".button-wrapper:hover .button-circle {\\n transform: scale(0.6);\\n}\\n\\n.button-wrapper:hover .button-text {\\n bottom: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"423caa48-6aa5-497c-994c-44422add7df4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why The Text Uses ","styles":{"bold":true}},{"type":"text","text":"left: 50%\n","styles":{"code":true}},{"type":"text","text":"The text is centered under the icon by moving it to the middle, then pulling it back with ","styles":{}},{"type":"text","text":"translateX(-50%)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"056f255e-dfc4-4f4b-810d-de5f815e7b18","type":"procode","props":{"code":".button-text {\n left: 50%;\n transform: translateX(-50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"n0i6lke5e\",\"name\":\"code\",\"code\":\".button-text {\\n left: 50%;\\n transform: translateX(-50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a002262e-04b9-470c-86a1-6bc14f68e91a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"Both the circle scale and text slide use ","styles":{}},{"type":"text","text":"0.3s ease","styles":{"code":true}},{"type":"text","text":", so they move together.","styles":{}}],"children":[]},{"id":"b6a89de5-a380-4a94-813d-d38ed92e587e","type":"procode","props":{"code":".button-circle {\n transition: transform 0.3s ease;\n}\n\n.button-text {\n transition: bottom 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"h8rq73aku\",\"name\":\"code\",\"code\":\".button-circle {\\n transition: transform 0.3s ease;\\n}\\n\\n.button-text {\\n transition: bottom 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f0d38ded-852a-4f15-8c1e-ddc9d949c887","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, the circle and text transitions are disabled.","styles":{}}],"children":[]},{"id":"dfff4e97-ccf1-414e-9e67-710d3850e30f","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .button-circle,\n .button-text {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"tplb6nipn\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .button-circle,\\n .button-text {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae0b1238-b005-4ce2-ae82-242e742d9171","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the circle shrink speed here:","styles":{}}],"children":[]},{"id":"f05d07ba-3170-4ddb-9844-0aa32787b54f","type":"procode","props":{"code":".button-circle {\n transition: transform 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"iw8jx32ky\",\"name\":\"code\",\"code\":\".button-circle {\\n transition: transform 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50c25550-041d-471d-90d6-ecf93c56ed4f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text slide speed here:","styles":{}}],"children":[]},{"id":"b6d2ca68-f5e3-4f59-bd40-dba75bdd3879","type":"procode","props":{"code":".button-text {\n transition: bottom 0.3s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yqxj5v8tz\",\"name\":\"code\",\"code\":\".button-text {\\n transition: bottom 0.3s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f5ee1e13-6d32-42ba-81be-75d7cfdcf17f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the purple circle color here:","styles":{}}],"children":[]},{"id":"38e98810-6a94-429c-bf08-e1890d40f3d6","type":"procode","props":{"code":".button-circle {\n background: #7c3aed;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zw533jbtp\",\"name\":\"code\",\"code\":\".button-circle {\\n background: #7c3aed;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e44b632-c10e-4b96-8622-566dc19a858d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text color here:","styles":{}}],"children":[]},{"id":"211a90f9-fc56-4ce6-8252-fbe6d57189ea","type":"procode","props":{"code":".button-text {\n color: #7c3aed;\n}","language":"javascript","filename":"","files":"[{\"id\":\"im55sz0mq\",\"name\":\"code\",\"code\":\".button-text {\\n color: #7c3aed;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cb21784a-1f4a-4a4d-b692-011241ce0998","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow color here:","styles":{}}],"children":[]},{"id":"f2439875-7571-4eda-9c6a-537dbf16c48b","type":"procode","props":{"code":".arrow-icon {\n fill: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x0ua0gllm\",\"name\":\"code\",\"code\":\".arrow-icon {\\n fill: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4b087be-f015-423b-b170-f347c612b8b3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the wrapper and circle size here:","styles":{}}],"children":[]},{"id":"b10f37c6-3c92-4733-b426-33de1e7c81ce","type":"procode","props":{"code":".button-wrapper,\n.button-circle {\n width: 56px;\n height: 56px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4hx04ez5o\",\"name\":\"code\",\"code\":\".button-wrapper,\\n.button-circle {\\n width: 56px;\\n height: 56px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bfe59ccc-5c36-4d8d-ae0e-41298d868213","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the icon size here:","styles":{}}],"children":[]},{"id":"77f156e5-2b39-46b3-b782-fbb88cbca601","type":"procode","props":{"code":".arrow-icon {\n width: 26px;\n height: 26px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0p50v2vdy\",\"name\":\"code\",\"code\":\".arrow-icon {\\n width: 26px;\\n height: 26px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e8d5f752-28e9-485a-a6cf-bd5bdf284a6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover shrink size here:","styles":{}}],"children":[]},{"id":"cdedbdaa-36bc-4b2a-ab92-9e2ce03e5287","type":"procode","props":{"code":".button-wrapper:hover .button-circle {\n transform: scale(0.6);\n}","language":"javascript","filename":"","files":"[{\"id\":\"7vl0hot7z\",\"name\":\"code\",\"code\":\".button-wrapper:hover .button-circle {\\n transform: scale(0.6);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e1dd28c7-5fe5-40e0-9d6c-64cd4a41eea4","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":"99c2e556-27b8-48c4-81ca-494a5044ef71","type":"procode","props":{"code":"

Button

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

Button

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19e54c84-e976-430e-a18b-8a084ea2dab2","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":"79575bff-a679-45d4-b29d-fca95a574c85","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"787iocp7n\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6c1aaca2-c058-4321-821b-761719491e5d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]