Circle Left Fill Button

[{"id":"78482b0f-9379-4196-a856-a8a0cef7dd47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ea00f6a6-84e0-4904-9143-bcd86bbb2b3c","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.demo-page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.fill-arrow-button {\\n position: relative;\\n display: inline-block;\\n width: max-content;\\n min-width: 3rem;\\n height: 3rem;\\n padding: 0;\\n border: 0;\\n outline: none;\\n background: transparent;\\n cursor: pointer;\\n vertical-align: middle;\\n text-decoration: none;\\n font-size: inherit;\\n font-family: inherit;\\n white-space: nowrap;\\n}\\n\\n.fill-arrow-button__circle {\\n position: absolute;\\n top: 0;\\n left: 0;\\n display: block;\\n width: 3rem;\\n height: 3rem;\\n margin: 0;\\n background: #000000;\\n border-radius: 1.625rem;\\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.fill-arrow-button__icon {\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: 0.625rem;\\n width: 1.125rem;\\n height: 0.125rem;\\n margin: auto;\\n background: none;\\n transition:\\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.fill-arrow-button__icon::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: -0.29rem;\\n right: 0.0625rem;\\n width: 0.625rem;\\n height: 0.625rem;\\n border-top: 0.125rem solid #ffffff;\\n border-right: 0.125rem solid #ffffff;\\n transform: rotate(45deg);\\n}\\n\\n.fill-arrow-button__text {\\n position: relative;\\n z-index: 2;\\n display: block;\\n padding: 0.75rem 1.5rem 0.75rem 4rem;\\n color: #282936;\\n font-weight: 700;\\n line-height: 1.6;\\n text-align: center;\\n text-transform: uppercase;\\n transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.fill-arrow-button:hover .fill-arrow-button__circle {\\n width: 100%;\\n}\\n\\n.fill-arrow-button:hover .fill-arrow-button__icon {\\n background: #ffffff;\\n transform: translate(1rem, 0);\\n}\\n\\n.fill-arrow-button:hover .fill-arrow-button__text {\\n color: #ffffff;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .fill-arrow-button__circle,\\n .fill-arrow-button__icon,\\n .fill-arrow-button__text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Circle Left Fill 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":"385e39ac-0dd9-48c4-9db0-dcf92fab7173","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"60d32a10-d633-454b-9ed6-c946f68d4af5","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f43df0cf-e047-49ed-b0e5-00d2c1ef6f1e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"bf0e611d-159d-4da6-8bff-be883f461fc2","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.demo-page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.fill-arrow-button {\\n position: relative;\\n display: inline-block;\\n width: max-content;\\n min-width: 3rem;\\n height: 3rem;\\n padding: 0;\\n border: 0;\\n outline: none;\\n background: transparent;\\n cursor: pointer;\\n vertical-align: middle;\\n text-decoration: none;\\n font-size: inherit;\\n font-family: inherit;\\n white-space: nowrap;\\n}\\n\\n.fill-arrow-button__circle {\\n position: absolute;\\n top: 0;\\n left: 0;\\n display: block;\\n width: 3rem;\\n height: 3rem;\\n margin: 0;\\n background: #000000;\\n border-radius: 1.625rem;\\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.fill-arrow-button__icon {\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: 0.625rem;\\n width: 1.125rem;\\n height: 0.125rem;\\n margin: auto;\\n background: none;\\n transition:\\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.fill-arrow-button__icon::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: -0.29rem;\\n right: 0.0625rem;\\n width: 0.625rem;\\n height: 0.625rem;\\n border-top: 0.125rem solid #ffffff;\\n border-right: 0.125rem solid #ffffff;\\n transform: rotate(45deg);\\n}\\n\\n.fill-arrow-button__text {\\n position: relative;\\n z-index: 2;\\n display: block;\\n padding: 0.75rem 1.5rem 0.75rem 4rem;\\n color: #282936;\\n font-weight: 700;\\n line-height: 1.6;\\n text-align: center;\\n text-transform: uppercase;\\n transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.fill-arrow-button:hover .fill-arrow-button__circle {\\n width: 100%;\\n}\\n\\n.fill-arrow-button:hover .fill-arrow-button__icon {\\n background: #ffffff;\\n transform: translate(1rem, 0);\\n}\\n\\n.fill-arrow-button:hover .fill-arrow-button__text {\\n color: #ffffff;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .fill-arrow-button__circle,\\n .fill-arrow-button__icon,\\n .fill-arrow-button__text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f7e9cf4-4c37-45e6-8117-45addd2563dc","type":"divider","props":{},"children":[]},{"id":"33f87a03-8389-4ca6-b308-381650edcc71","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"e1d76b5b-715f-436a-8d17-a5233ddf20e5","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 circle left fill button. It starts with a black circle on the left, then on hover the circle expands to cover the full button width.","styles":{}}],"children":[]},{"id":"720d0960-1e63-441c-a1df-d4db7025b928","type":"procode","props":{"code":".learn-more .circle {\n background: #000000;\n border-radius: 1.625rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gbu6vuxl7\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n background: #000000;\\n border-radius: 1.625rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de9e3770-55c7-4569-93c5-4a6340b8f33f","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":"493e76ca-ca84-4dfa-94f8-3fc2a33b9c7b","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o1uc2vff6\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1bc3ed0-e7c1-4a66-97a6-53171c46b8db","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Reset\n","styles":{"bold":true}},{"type":"text","text":"The base ","styles":{}},{"type":"text","text":"button","styles":{"code":true}},{"type":"text","text":" selector removes default browser styling and keeps the button transparent.","styles":{}}],"children":[]},{"id":"90701e78-3fa7-47c0-b7e7-2e2cc7180af7","type":"procode","props":{"code":"button {\n position: relative;\n display: inline-block;\n cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n background: transparent;\n padding: 0;\n font-size: inherit;\n font-family: inherit;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yo9ik19vb\",\"name\":\"code\",\"code\":\"button {\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n outline: none;\\n border: 0;\\n vertical-align: middle;\\n text-decoration: none;\\n background: transparent;\\n padding: 0;\\n font-size: inherit;\\n font-family: inherit;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c6b14a85-35d1-41c1-a279-84e11cf353a8","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":".learn-more","styles":{"code":true}},{"type":"text","text":" button uses ","styles":{}},{"type":"text","text":"width: max-content","styles":{"code":true}},{"type":"text","text":", so the button width follows the text content.","styles":{}}],"children":[]},{"id":"5ad68339-525d-43c5-8bf7-907c7809f1b9","type":"procode","props":{"code":".learn-more {\n width: max-content;\n min-width: 3rem;\n height: 3rem;\n white-space: nowrap;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s1h5nvl9p\",\"name\":\"code\",\"code\":\".learn-more {\\n width: max-content;\\n min-width: 3rem;\\n height: 3rem;\\n white-space: nowrap;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"310327c5-00eb-47e8-9f49-00349461a3f5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Circle Fill Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".circle","styles":{"code":true}},{"type":"text","text":" starts as a ","styles":{}},{"type":"text","text":"3rem","styles":{"code":true}},{"type":"text","text":" black rounded shape on the left side.","styles":{}}],"children":[]},{"id":"57eee597-45ea-4029-8b4e-e6ca31c421cd","type":"procode","props":{"code":".learn-more .circle {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: 3rem;\n height: 3rem;\n margin: 0;\n background: #000000;\n border-radius: 1.625rem;\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"0s3y8hdj7\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n position: absolute;\\n top: 0;\\n left: 0;\\n display: block;\\n width: 3rem;\\n height: 3rem;\\n margin: 0;\\n background: #000000;\\n border-radius: 1.625rem;\\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a566e20e-ccc4-498d-87b5-bac19989b9ca","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"position: absolute","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The circle needs to sit behind the text and expand from the left, so it is positioned absolutely inside the button.","styles":{}}],"children":[]},{"id":"a5adb79c-2dd3-47e7-942a-e5e82a531e72","type":"procode","props":{"code":".learn-more .circle {\n position: absolute;\n top: 0;\n left: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zlrai6o7h\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n position: absolute;\\n top: 0;\\n left: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf2f65aa-8753-4c7c-bad3-e5ea7e999b78","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Icon Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".icon","styles":{"code":true}},{"type":"text","text":" is positioned inside the circle and vertically centered using ","styles":{}},{"type":"text","text":"top: 0","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"bottom: 0","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"margin: auto","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1b35f94d-c4f5-46af-9f29-0a4584b6196d","type":"procode","props":{"code":".learn-more .circle .icon {\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto;\n background: #ffffff;\n transition:\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"xhtl5q0c9\",\"name\":\"code\",\"code\":\".learn-more .circle .icon {\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n margin: auto;\\n background: #ffffff;\\n transition:\\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ef8a8b63-30c2-41f9-ab74-cdf8ae2a390d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Line Setup\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".icon.arrow","styles":{"code":true}},{"type":"text","text":" creates the horizontal arrow line. It starts with ","styles":{}},{"type":"text","text":"background: none","styles":{"code":true}},{"type":"text","text":", so only the arrow head is visible before hover.","styles":{}}],"children":[]},{"id":"4eeb89d9-3b65-4df7-abd8-7bba2ecb24b1","type":"procode","props":{"code":".learn-more .circle .icon.arrow {\n left: 0.625rem;\n width: 1.125rem;\n height: 0.125rem;\n background: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"51crna36r\",\"name\":\"code\",\"code\":\".learn-more .circle .icon.arrow {\\n left: 0.625rem;\\n width: 1.125rem;\\n height: 0.125rem;\\n background: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4b0f19fd-f758-43ce-a8fa-acdd8c4a0a49","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Head\n","styles":{"bold":true}},{"type":"text","text":"The arrow head is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" using only top and right borders, then rotated ","styles":{}},{"type":"text","text":"45deg","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"0b7841a3-bd42-4fbc-92d6-077f1dc4277b","type":"procode","props":{"code":".learn-more .circle .icon.arrow::before {\n content: \"\";\n position: absolute;\n top: -0.29rem;\n right: 0.0625rem;\n width: 0.625rem;\n height: 0.625rem;\n border-top: 0.125rem solid #ffffff;\n border-right: 0.125rem solid #ffffff;\n transform: rotate(45deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"glxgz04pw\",\"name\":\"code\",\"code\":\".learn-more .circle .icon.arrow::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: -0.29rem;\\n right: 0.0625rem;\\n width: 0.625rem;\\n height: 0.625rem;\\n border-top: 0.125rem solid #ffffff;\\n border-right: 0.125rem solid #ffffff;\\n transform: rotate(45deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"83de730c-fb85-40b4-9295-669a718f8941","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Text\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-text","styles":{"code":true}},{"type":"text","text":" sits above the circle fill using ","styles":{}},{"type":"text","text":"z-index: 2","styles":{"code":true}},{"type":"text","text":". The left padding gives space for the circle icon.","styles":{}}],"children":[]},{"id":"a9c49db0-0b78-4345-9a17-60584014048b","type":"procode","props":{"code":".learn-more .button-text {\n position: relative;\n z-index: 2;\n display: block;\n padding: 0.75rem 1.5rem 0.75rem 4rem;\n color: #282936;\n font-weight: 700;\n line-height: 1.6;\n text-align: center;\n text-transform: uppercase;\n transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"u14sz9o70\",\"name\":\"code\",\"code\":\".learn-more .button-text {\\n position: relative;\\n z-index: 2;\\n display: block;\\n padding: 0.75rem 1.5rem 0.75rem 4rem;\\n color: #282936;\\n font-weight: 700;\\n line-height: 1.6;\\n text-align: center;\\n text-transform: uppercase;\\n transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da4b4985-c22e-4f74-86e1-4ec8e74a0776","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Circle Fill\n","styles":{"bold":true}},{"type":"text","text":"On hover, the black circle expands to ","styles":{}},{"type":"text","text":"100%","styles":{"code":true}},{"type":"text","text":" width, filling the full button background.","styles":{}}],"children":[]},{"id":"caead959-61ba-48f7-ae21-b32293f2460c","type":"procode","props":{"code":".learn-more:hover .circle {\n width: 100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nubm1ml78\",\"name\":\"code\",\"code\":\".learn-more:hover .circle {\\n width: 100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de69597d-5d0d-4b7f-8abd-51c7c4aa4896","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Arrow State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the arrow line becomes white and moves to the right by ","styles":{}},{"type":"text","text":"1rem","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"35a27389-dfbe-43cb-b0ad-05b6ef808930","type":"procode","props":{"code":".learn-more:hover .circle .icon.arrow {\n background: #ffffff;\n transform: translate(1rem, 0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"yda5n3vax\",\"name\":\"code\",\"code\":\".learn-more:hover .circle .icon.arrow {\\n background: #ffffff;\\n transform: translate(1rem, 0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a8d3f69-2ff7-49bb-bb44-b59960321de5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Text State\n","styles":{"bold":true}},{"type":"text","text":"When the black circle fills the button, the text changes to white.","styles":{}}],"children":[]},{"id":"93cfadd1-2a20-4137-a75d-27d8bbd2f2f2","type":"procode","props":{"code":".learn-more:hover .button-text {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hitldf962\",\"name\":\"code\",\"code\":\".learn-more:hover .button-text {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc1d717c-344d-4f6e-8428-017724962ba6","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 circle expands, the arrow moves, and the text changes color.","styles":{}}],"children":[]},{"id":"f8e925ca-931e-4e59-9119-380de9dab8b2","type":"procode","props":{"code":".learn-more:hover .circle {\n width: 100%;\n}\n\n.learn-more:hover .circle .icon.arrow {\n background: #ffffff;\n transform: translate(1rem, 0);\n}\n\n.learn-more:hover .button-text {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tgfw7ys7q\",\"name\":\"code\",\"code\":\".learn-more:hover .circle {\\n width: 100%;\\n}\\n\\n.learn-more:hover .circle .icon.arrow {\\n background: #ffffff;\\n transform: translate(1rem, 0);\\n}\\n\\n.learn-more:hover .button-text {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b350709-6f2c-420f-ab8b-ae1acb580d57","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why The Text Has Left Padding\n","styles":{"bold":true}},{"type":"text","text":"The text uses ","styles":{}},{"type":"text","text":"padding-left: 4rem","styles":{"code":true}},{"type":"text","text":" so it does not overlap the default ","styles":{}},{"type":"text","text":"3rem","styles":{"code":true}},{"type":"text","text":" circle.","styles":{}}],"children":[]},{"id":"d83eb2a4-fbc0-428f-af15-6d808a015a21","type":"procode","props":{"code":".learn-more .button-text {\n padding: 0.75rem 1.5rem 0.75rem 4rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ajtc2s7hp\",\"name\":\"code\",\"code\":\".learn-more .button-text {\\n padding: 0.75rem 1.5rem 0.75rem 4rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c2aa01db-8f92-4562-9731-8078c9275784","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"z-index: 2","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The text must stay above the expanding black circle. That is why ","styles":{}},{"type":"text","text":".button-text","styles":{"code":true}},{"type":"text","text":" uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"z-index: 2","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f5d0f3e9-2e62-4bd1-855f-dbb5e71ad784","type":"procode","props":{"code":".learn-more .button-text {\n position: relative;\n z-index: 2;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6qtrhbf7m\",\"name\":\"code\",\"code\":\".learn-more .button-text {\\n position: relative;\\n z-index: 2;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"53b7fdf0-ce1b-4501-b39d-71c92ad06077","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The circle width, arrow movement, arrow background, and text color all use the same custom cubic-bezier timing.","styles":{}}],"children":[]},{"id":"d6c87730-a7a4-461c-902d-e76acaf6edb8","type":"procode","props":{"code":".learn-more .circle {\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}\n\n.learn-more .circle .icon {\n transition:\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}\n\n.learn-more .button-text {\n transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zgmhtwzy1\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.learn-more .circle .icon {\\n transition:\\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\\n\\n.learn-more .button-text {\\n transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4011451-4216-4e48-a290-2a8abd3618ab","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 transitions are removed.","styles":{}}],"children":[]},{"id":"e7967a28-b817-4803-8af1-3f541c5e0538","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .learn-more .circle,\n .learn-more .circle .icon,\n .learn-more .button-text {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"794fd0ltt\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .learn-more .circle,\\n .learn-more .circle .icon,\\n .learn-more .button-text {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44b373e4-6a3b-45b7-95df-e717a1e8d60a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the fill speed here:","styles":{}}],"children":[]},{"id":"b1645f25-a7a9-41a5-8054-897fd0b4e19c","type":"procode","props":{"code":".learn-more .circle {\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rn1ao4xxb\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"57e12f45-a98d-4ab3-a786-7a6579e8edab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow movement speed here:","styles":{}}],"children":[]},{"id":"6bb20298-0f09-4102-a232-f6928aaa0864","type":"procode","props":{"code":".learn-more .circle .icon {\n transition:\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"9fta10atj\",\"name\":\"code\",\"code\":\".learn-more .circle .icon {\\n transition:\\n background 0.45s cubic-bezier(0.65, 0, 0.076, 1),\\n transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"61c7c80d-72d1-4175-8f20-97d0c6176bdb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the circle fill color here:","styles":{}}],"children":[]},{"id":"54614bbf-de65-449f-8477-e33c5f73d7b1","type":"procode","props":{"code":".learn-more .circle {\n background: #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dn15s2faq\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n background: #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"df946a1f-8b9f-4380-a4bb-a4674e7223ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the default text color here:","styles":{}}],"children":[]},{"id":"98c85933-8c1e-482e-85b6-bffc67aab883","type":"procode","props":{"code":".learn-more .button-text {\n color: #282936;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jlq0aqouw\",\"name\":\"code\",\"code\":\".learn-more .button-text {\\n color: #282936;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a512e7e1-98bf-482d-aad5-c7c5b7601bfe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover text color here:","styles":{}}],"children":[]},{"id":"976180b3-73ce-4a21-8c3e-4c1e999323c1","type":"procode","props":{"code":".learn-more:hover .button-text {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"16j4vmsrd\",\"name\":\"code\",\"code\":\".learn-more:hover .button-text {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb426bb1-54f0-4d2e-b54b-eab339c6266e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow color here:","styles":{}}],"children":[]},{"id":"86cd9162-c32c-43c9-bacd-4e1124c99b3c","type":"procode","props":{"code":".learn-more .circle .icon.arrow::before {\n border-top: 0.125rem solid #ffffff;\n border-right: 0.125rem solid #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ntouucdm6\",\"name\":\"code\",\"code\":\".learn-more .circle .icon.arrow::before {\\n border-top: 0.125rem solid #ffffff;\\n border-right: 0.125rem solid #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7ae0b43-7a52-4edd-b4f1-5c5dafa5618d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the circle size here:","styles":{}}],"children":[]},{"id":"4f9daa9b-b80b-43cd-b844-3d9aa01fd056","type":"procode","props":{"code":".learn-more .circle {\n width: 3rem;\n height: 3rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jpgt9uo87\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n width: 3rem;\\n height: 3rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b65c14f9-a02d-469e-b4ab-192c7c87201e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button height here:","styles":{}}],"children":[]},{"id":"80de858c-3b5e-4ee7-9017-7ce958d69117","type":"procode","props":{"code":".learn-more {\n height: 3rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uxhyrz1yh\",\"name\":\"code\",\"code\":\".learn-more {\\n height: 3rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7ad00a11-ad1f-4079-8ad7-f4a275728bd3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the circle roundness here:","styles":{}}],"children":[]},{"id":"e6f15776-5d58-47f1-8715-0f8d557d16de","type":"procode","props":{"code":".learn-more .circle {\n border-radius: 1.625rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"sfq0yqzqb\",\"name\":\"code\",\"code\":\".learn-more .circle {\\n border-radius: 1.625rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fb3dcd0c-1f16-4c6e-9eab-b38d414925d9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow line size here:","styles":{}}],"children":[]},{"id":"19c3c2a7-bf58-4d6e-8d4e-e31efc65b181","type":"procode","props":{"code":".learn-more .circle .icon.arrow {\n width: 1.125rem;\n height: 0.125rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"h51hiudvs\",\"name\":\"code\",\"code\":\".learn-more .circle .icon.arrow {\\n width: 1.125rem;\\n height: 0.125rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ef334bf7-be62-4f68-80ff-d155a135199f","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":"e3c9c05e-9b59-4d0b-8db3-83d91c814e83","type":"procode","props":{"code":"Button","language":"javascript","filename":"","files":"[{\"id\":\"ing2toilv\",\"name\":\"code\",\"code\":\"Button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7f005aaa-e4c6-4a93-9e93-1bc7f9ceccca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]