Triple Arrow Button

[{"id":"c41d46e7-94b7-452d-9b72-2b431339f3b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"cacb6795-deef-4c4e-b71f-ae27bd1ea124","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: \\\"Poppins\\\", sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.next-button {\\n --main-size: 2em;\\n --color-text: #ffffff;\\n --color-background: #5d3fd3;\\n --color-background-hover: #5d3fd3;\\n\\n cursor: pointer;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border: none;\\n outline: none;\\n border-radius: calc(var(--main-size) * 100);\\n padding: 0.33em 0 0.33em 0.66em;\\n color: var(--color-text);\\n background: var(--color-background);\\n box-shadow: none;\\n font-family: inherit;\\n font-weight: 600;\\n font-size: var(--main-size);\\n line-height: 1;\\n text-decoration: none;\\n transition:\\n transform 0.25s ease,\\n background 0.5s ease;\\n}\\n\\n.next-button:focus,\\n.next-button:focus-visible {\\n outline: none;\\n box-shadow: none;\\n}\\n\\n.next-button:active {\\n transform: scale(0.95);\\n}\\n\\n.next-button:hover {\\n outline: none;\\n box-shadow: none;\\n animation: colorize 1s infinite;\\n}\\n\\n.next-button span {\\n margin-right: 0.3em;\\n}\\n\\n.next-button:hover span {\\n text-shadow: none;\\n}\\n\\n.next-button:active span {\\n text-shadow: none;\\n}\\n\\n.next-button svg {\\n width: auto;\\n height: 0.8em;\\n fill: var(--color-text);\\n margin-right: -0.16em;\\n position: relative;\\n filter: none;\\n transition: margin-right 0.5s ease;\\n}\\n\\n.next-button:hover svg {\\n margin-right: 0.66em;\\n filter: none;\\n}\\n\\n.next-button:active svg {\\n filter: none;\\n}\\n\\n.next-button svg polygon:nth-child(1) {\\n transition: transform 0.4s ease;\\n transform: translateX(-60%);\\n}\\n\\n.next-button svg polygon:nth-child(2) {\\n transition: transform 0.5s ease;\\n transform: translateX(-30%);\\n}\\n\\n.next-button:hover svg polygon:nth-child(1) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.6s;\\n}\\n\\n.next-button:hover svg polygon:nth-child(2) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.4s;\\n}\\n\\n.next-button:hover svg polygon:nth-child(3) {\\n animation: arrow-blink 1s infinite 0.2s;\\n}\\n\\n@keyframes arrow-blink {\\n 0% {\\n opacity: 1;\\n }\\n\\n 50% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes colorize {\\n 0% {\\n background: var(--color-background);\\n }\\n\\n 50% {\\n background: var(--color-background-hover);\\n }\\n\\n 100% {\\n background: var(--color-background);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .next-button,\\n .next-button span,\\n .next-button svg,\\n .next-button svg polygon {\\n transition: none;\\n animation: none;\\n }\\n\\n .next-button:hover,\\n .next-button:hover svg polygon {\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Triple Arrow Button\\n \\n \\n \\n \\n \\n \\n

\\n \\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"edda7c6e-462a-4203-ac33-ec584f84a532","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c5417d0c-a389-4a1e-9f44-7e473547a3a3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"c1e8e815-ef72-4e25-bd19-8945879b81d8","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf0c4a98-9b90-4f08-b457-0725418e440c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"6653245b-d1f5-4d2c-bc9d-43a0be3ba119","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: \\\"Poppins\\\", sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.next-button {\\n --main-size: 2em;\\n --color-text: #ffffff;\\n --color-background: #5d3fd3;\\n --color-background-hover: #5d3fd3;\\n\\n cursor: pointer;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border: none;\\n outline: none;\\n border-radius: calc(var(--main-size) * 100);\\n padding: 0.33em 0 0.33em 0.66em;\\n color: var(--color-text);\\n background: var(--color-background);\\n box-shadow: none;\\n font-family: inherit;\\n font-weight: 600;\\n font-size: var(--main-size);\\n line-height: 1;\\n text-decoration: none;\\n transition:\\n transform 0.25s ease,\\n background 0.5s ease;\\n}\\n\\n.next-button:focus,\\n.next-button:focus-visible {\\n outline: none;\\n box-shadow: none;\\n}\\n\\n.next-button:active {\\n transform: scale(0.95);\\n}\\n\\n.next-button:hover {\\n outline: none;\\n box-shadow: none;\\n animation: colorize 1s infinite;\\n}\\n\\n.next-button span {\\n margin-right: 0.3em;\\n}\\n\\n.next-button:hover span {\\n text-shadow: none;\\n}\\n\\n.next-button:active span {\\n text-shadow: none;\\n}\\n\\n.next-button svg {\\n width: auto;\\n height: 0.8em;\\n fill: var(--color-text);\\n margin-right: -0.16em;\\n position: relative;\\n filter: none;\\n transition: margin-right 0.5s ease;\\n}\\n\\n.next-button:hover svg {\\n margin-right: 0.66em;\\n filter: none;\\n}\\n\\n.next-button:active svg {\\n filter: none;\\n}\\n\\n.next-button svg polygon:nth-child(1) {\\n transition: transform 0.4s ease;\\n transform: translateX(-60%);\\n}\\n\\n.next-button svg polygon:nth-child(2) {\\n transition: transform 0.5s ease;\\n transform: translateX(-30%);\\n}\\n\\n.next-button:hover svg polygon:nth-child(1) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.6s;\\n}\\n\\n.next-button:hover svg polygon:nth-child(2) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.4s;\\n}\\n\\n.next-button:hover svg polygon:nth-child(3) {\\n animation: arrow-blink 1s infinite 0.2s;\\n}\\n\\n@keyframes arrow-blink {\\n 0% {\\n opacity: 1;\\n }\\n\\n 50% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes colorize {\\n 0% {\\n background: var(--color-background);\\n }\\n\\n 50% {\\n background: var(--color-background-hover);\\n }\\n\\n 100% {\\n background: var(--color-background);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .next-button,\\n .next-button span,\\n .next-button svg,\\n .next-button svg polygon {\\n transition: none;\\n animation: none;\\n }\\n\\n .next-button:hover,\\n .next-button:hover svg polygon {\\n animation: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"417a6b71-a7a7-4e37-9dea-f8f79828301a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"c186309d-9278-408f-82c8-b47a1ddb3490","type":"divider","props":{},"children":[]},{"id":"66ebb34a-6db9-4235-bf25-5e2f6129217b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"953e8880-97fd-4571-81a3-505e8736969d","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 triple arrow next button. It uses a purple pill background, white ","styles":{}},{"type":"text","text":"NEXT","styles":{"code":true}},{"type":"text","text":" text, and three SVG arrow polygons.","styles":{}}],"children":[]},{"id":"8291a086-41ce-446a-b5f2-e9c37c45a99e","type":"procode","props":{"code":".next-button {\n --main-size: 2em;\n --color-text: #ffffff;\n --color-background: #5d3fd3;\n --color-background-hover: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zbqsm63jh\",\"name\":\"code\",\"code\":\".next-button {\\n --main-size: 2em;\\n --color-text: #ffffff;\\n --color-background: #5d3fd3;\\n --color-background-hover: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fa310aa2-073f-443b-835a-6cfe60b37527","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Font\n","styles":{"bold":true}},{"type":"text","text":"The button uses the external Google Font ","styles":{}},{"type":"text","text":"Poppins","styles":{"code":true}},{"type":"text","text":" with weight ","styles":{}},{"type":"text","text":"600","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9de47c91-93d3-433b-8fac-7b833e1c68f8","type":"procode","props":{"code":"\n\n","language":"javascript","filename":"","files":"[{\"id\":\"3y4kc3m9k\",\"name\":\"code\",\"code\":\"\\n\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"994e0a13-d6b8-4c54-a9af-1cd6ffbbb561","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":"6e340b83-5369-41a4-b00d-749e441aa526","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2bxc5ptmo\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5717e73c-71da-47f1-920f-fa5ea7dc0514","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":".next-button","styles":{"code":true}},{"type":"text","text":" is a rounded pill button. It uses Flexbox to align the text and SVG arrows horizontally.","styles":{}}],"children":[]},{"id":"e1f9aca9-48be-471f-9a1a-17e1933d808a","type":"procode","props":{"code":".next-button {\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n outline: none;\n border-radius: calc(var(--main-size) * 100);\n padding: 0.33em 0 0.33em 0.66em;\n color: var(--color-text);\n background: var(--color-background);\n box-shadow: none;\n font-family: inherit;\n font-weight: 600;\n font-size: var(--main-size);\n line-height: 1;\n text-decoration: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ju7fttvd9\",\"name\":\"code\",\"code\":\".next-button {\\n cursor: pointer;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border: none;\\n outline: none;\\n border-radius: calc(var(--main-size) * 100);\\n padding: 0.33em 0 0.33em 0.66em;\\n color: var(--color-text);\\n background: var(--color-background);\\n box-shadow: none;\\n font-family: inherit;\\n font-weight: 600;\\n font-size: var(--main-size);\\n line-height: 1;\\n text-decoration: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b18a7a91-61f3-4ec3-8eee-172afbf21157","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus State\n","styles":{"bold":true}},{"type":"text","text":"Focus and keyboard focus remove outline and shadow to keep the button clean.","styles":{}}],"children":[]},{"id":"dabe55d0-f769-4ad4-9c29-4949da22be36","type":"procode","props":{"code":".next-button:focus,\n.next-button:focus-visible {\n outline: none;\n box-shadow: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"82s9rveg3\",\"name\":\"code\",\"code\":\".next-button:focus,\\n.next-button:focus-visible {\\n outline: none;\\n box-shadow: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d8a84e29-18ad-44b7-bad8-fb9755e8b91b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active State\n","styles":{"bold":true}},{"type":"text","text":"When clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"98031149-138e-49c3-88d8-3dd965efea53","type":"procode","props":{"code":".next-button:active {\n transform: scale(0.95);\n}","language":"javascript","filename":"","files":"[{\"id\":\"bgc8on3y7\",\"name\":\"code\",\"code\":\".next-button:active {\\n transform: scale(0.95);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"52be1474-607e-48ce-ba1f-17a347702ddc","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Button State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the button runs the ","styles":{}},{"type":"text","text":"colorize","styles":{"code":true}},{"type":"text","text":" animation. In this exact version, the normal and hover background variables are the same purple color.","styles":{}}],"children":[]},{"id":"0ab08e53-fcd4-44ea-97a2-d42a664b1eff","type":"procode","props":{"code":".next-button:hover {\n outline: none;\n box-shadow: none;\n animation: colorize 1s infinite;\n}","language":"javascript","filename":"","files":"[{\"id\":\"e819rsyok\",\"name\":\"code\",\"code\":\".next-button:hover {\\n outline: none;\\n box-shadow: none;\\n animation: colorize 1s infinite;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c370fde9-a3c9-48d0-91f6-3b22800ea171","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Spacing\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":"NEXT","styles":{"code":true}},{"type":"text","text":" text has right margin so it does not touch the arrow SVG.","styles":{}}],"children":[]},{"id":"5fd0a7fe-17c7-4556-85a0-cc8afb2a6a2f","type":"procode","props":{"code":".next-button span {\n margin-right: 0.3em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wc3emg5rb\",\"name\":\"code\",\"code\":\".next-button span {\\n margin-right: 0.3em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"48fd35d7-4301-470b-952f-2bfa999a7e74","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SVG Base\n","styles":{"bold":true}},{"type":"text","text":"The SVG arrow group uses white fill, ","styles":{}},{"type":"text","text":"0.8em","styles":{"code":true}},{"type":"text","text":" height, and a negative right margin before hover.","styles":{}}],"children":[]},{"id":"ae02928c-7acb-4210-a03a-2f5f79556db7","type":"procode","props":{"code":".next-button svg {\n width: auto;\n height: 0.8em;\n fill: var(--color-text);\n margin-right: -0.16em;\n position: relative;\n filter: none;\n transition: margin-right 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"oxe604t3c\",\"name\":\"code\",\"code\":\".next-button svg {\\n width: auto;\\n height: 0.8em;\\n fill: var(--color-text);\\n margin-right: -0.16em;\\n position: relative;\\n filter: none;\\n transition: margin-right 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"28070be2-4c24-4907-85ab-f3e46d5f05ca","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SVG Hover Movement\n","styles":{"bold":true}},{"type":"text","text":"On hover, the SVG gets more right margin, making the arrow group feel like it opens up.","styles":{}}],"children":[]},{"id":"17e6ea43-47a1-4ca0-9e9d-53c255e3e1bf","type":"procode","props":{"code":".next-button:hover svg {\n margin-right: 0.66em;\n filter: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qop76qy72\",\"name\":\"code\",\"code\":\".next-button:hover svg {\\n margin-right: 0.66em;\\n filter: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8afa7566-8ad5-4db8-8b99-fd3fd97543f2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"First Arrow Default Position\n","styles":{"bold":true}},{"type":"text","text":"The first polygon starts shifted left by ","styles":{}},{"type":"text","text":"-60%","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8726799d-780c-4d06-be19-33da7a7a15f7","type":"procode","props":{"code":".next-button svg polygon:nth-child(1) {\n transition: transform 0.4s ease;\n transform: translateX(-60%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zwrbh0nbx\",\"name\":\"code\",\"code\":\".next-button svg polygon:nth-child(1) {\\n transition: transform 0.4s ease;\\n transform: translateX(-60%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae8b259b-910c-4403-bc04-d477bb286bcf","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Second Arrow Default Position\n","styles":{"bold":true}},{"type":"text","text":"The second polygon starts shifted left by ","styles":{}},{"type":"text","text":"-30%","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"163dfe24-9e1f-48c0-9f83-cd3e9c284c7f","type":"procode","props":{"code":".next-button svg polygon:nth-child(2) {\n transition: transform 0.5s ease;\n transform: translateX(-30%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"mwm3qfvho\",\"name\":\"code\",\"code\":\".next-button svg polygon:nth-child(2) {\\n transition: transform 0.5s ease;\\n transform: translateX(-30%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fe7c1c13-1d90-4193-9bb7-7e2ff9c44295","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"First Arrow Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the first arrow moves into place and starts blinking after ","styles":{}},{"type":"text","text":"0.6s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9cbe438a-c0d5-4302-a9f4-59c42a82b906","type":"procode","props":{"code":".next-button:hover svg polygon:nth-child(1) {\n transform: translateX(0%);\n animation: arrow-blink 1s infinite 0.6s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"r29x0bnzp\",\"name\":\"code\",\"code\":\".next-button:hover svg polygon:nth-child(1) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.6s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"79946d0a-3c91-4b04-9e07-22f780944723","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Second Arrow Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the second arrow moves into place and starts blinking after ","styles":{}},{"type":"text","text":"0.4s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9b18da4c-1a43-4bfc-ab91-bd2fa83afc36","type":"procode","props":{"code":".next-button:hover svg polygon:nth-child(2) {\n transform: translateX(0%);\n animation: arrow-blink 1s infinite 0.4s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o8axjatzd\",\"name\":\"code\",\"code\":\".next-button:hover svg polygon:nth-child(2) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.4s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6d3ac12-43f1-4312-bbff-bf3949fe9b30","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Third Arrow Hover State\n","styles":{"bold":true}},{"type":"text","text":"The third arrow is already in place, so it only gets the blink animation on hover.","styles":{}}],"children":[]},{"id":"adf6d91a-a87b-4bde-8be5-d42e12202896","type":"procode","props":{"code":".next-button:hover svg polygon:nth-child(3) {\n animation: arrow-blink 1s infinite 0.2s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"pafql7qmk\",\"name\":\"code\",\"code\":\".next-button:hover svg polygon:nth-child(3) {\\n animation: arrow-blink 1s infinite 0.2s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"37e02952-c77e-42cd-8c57-94d2fc38ba48","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Blink Animation\n","styles":{"bold":true}},{"type":"text","text":"The arrows blink by changing opacity from visible to hidden and back again.","styles":{}}],"children":[]},{"id":"c2391002-f64e-4871-b55c-f3b54fcfc490","type":"procode","props":{"code":"@keyframes arrow-blink {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"16ukvvymd\",\"name\":\"code\",\"code\":\"@keyframes arrow-blink {\\n 0% {\\n opacity: 1;\\n }\\n\\n 50% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f1ea1fae-3165-46c4-b579-bb1660103b28","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Colorize Animation\n","styles":{"bold":true}},{"type":"text","text":"The button background animates between ","styles":{}},{"type":"text","text":"--color-background","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"--color-background-hover","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f45046c3-0713-4b0d-b3cf-f0db26b769df","type":"procode","props":{"code":"@keyframes colorize {\n 0% {\n background: var(--color-background);\n }\n\n 50% {\n background: var(--color-background-hover);\n }\n\n 100% {\n background: var(--color-background);\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"v68ic7ghq\",\"name\":\"code\",\"code\":\"@keyframes colorize {\\n 0% {\\n background: var(--color-background);\\n }\\n\\n 50% {\\n background: var(--color-background-hover);\\n }\\n\\n 100% {\\n background: var(--color-background);\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a25c3882-955f-44c0-8972-c745c597172c","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 two arrows slide into place, then all three arrows blink with staggered delays.","styles":{}}],"children":[]},{"id":"2fa7923b-3c77-4bec-9bfd-68a32c52dd19","type":"procode","props":{"code":".next-button svg polygon:nth-child(1) {\n transform: translateX(-60%);\n}\n\n.next-button svg polygon:nth-child(2) {\n transform: translateX(-30%);\n}\n\n.next-button:hover svg polygon:nth-child(1) {\n transform: translateX(0%);\n animation: arrow-blink 1s infinite 0.6s;\n}\n\n.next-button:hover svg polygon:nth-child(2) {\n transform: translateX(0%);\n animation: arrow-blink 1s infinite 0.4s;\n}\n\n.next-button:hover svg polygon:nth-child(3) {\n animation: arrow-blink 1s infinite 0.2s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o1johvrw3\",\"name\":\"code\",\"code\":\".next-button svg polygon:nth-child(1) {\\n transform: translateX(-60%);\\n}\\n\\n.next-button svg polygon:nth-child(2) {\\n transform: translateX(-30%);\\n}\\n\\n.next-button:hover svg polygon:nth-child(1) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.6s;\\n}\\n\\n.next-button:hover svg polygon:nth-child(2) {\\n transform: translateX(0%);\\n animation: arrow-blink 1s infinite 0.4s;\\n}\\n\\n.next-button:hover svg polygon:nth-child(3) {\\n animation: arrow-blink 1s infinite 0.2s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"15f4e527-0bb4-4d48-8a68-e9ca15d490ef","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why Three Polygons Are Used\n","styles":{"bold":true}},{"type":"text","text":"The SVG has three separate arrow polygons. This makes it possible to animate each arrow with a different movement and blink delay.","styles":{}}],"children":[]},{"id":"50de5443-dd62-48ce-916a-06299b4026d4","type":"procode","props":{"code":"\n\n","language":"javascript","filename":"","files":"[{\"id\":\"hyri348rl\",\"name\":\"code\",\"code\":\"\\n\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"64c80ff9-8d81-4c5c-9acc-a13a46bca40d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button transform uses ","styles":{}},{"type":"text","text":"0.25s","styles":{"code":true}},{"type":"text","text":", the background uses ","styles":{}},{"type":"text","text":"0.5s","styles":{"code":true}},{"type":"text","text":", and the SVG margin movement uses ","styles":{}},{"type":"text","text":"0.5s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1c5eb603-9eed-45bd-a85a-6d30520e6f54","type":"procode","props":{"code":".next-button {\n transition:\n transform 0.25s ease,\n background 0.5s ease;\n}\n\n.next-button svg {\n transition: margin-right 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rxzdndc6h\",\"name\":\"code\",\"code\":\".next-button {\\n transition:\\n transform 0.25s ease,\\n background 0.5s ease;\\n}\\n\\n.next-button svg {\\n transition: margin-right 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f1713f0f-9f93-4024-a7e6-4f26e43bf89b","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 and animations are removed.","styles":{}}],"children":[]},{"id":"f1e0bc73-5907-475e-a420-aad85cd218ae","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .next-button,\n .next-button span,\n .next-button svg,\n .next-button svg polygon {\n transition: none;\n animation: none;\n }\n\n .next-button:hover,\n .next-button:hover svg polygon {\n animation: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"4bd8axn60\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .next-button,\\n .next-button span,\\n .next-button svg,\\n .next-button svg polygon {\\n transition: none;\\n animation: none;\\n }\\n\\n .next-button:hover,\\n .next-button:hover svg polygon {\\n animation: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd4247e7-b520-4bf5-a9fa-e6a093a734d1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the arrow blink speed here:","styles":{}}],"children":[]},{"id":"f9564274-b030-415e-9788-5eb03b602fa2","type":"procode","props":{"code":".next-button:hover svg polygon:nth-child(3) {\n animation: arrow-blink 1s infinite 0.2s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"33bmbt6yv\",\"name\":\"code\",\"code\":\".next-button:hover svg polygon:nth-child(3) {\\n animation: arrow-blink 1s infinite 0.2s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2fa635d6-a2a0-4795-881f-8634b9cd6d90","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the SVG movement speed here:","styles":{}}],"children":[]},{"id":"ca0f203a-5974-49f5-b575-25c60b417d0b","type":"procode","props":{"code":".next-button svg {\n transition: margin-right 0.5s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fp2r337op\",\"name\":\"code\",\"code\":\".next-button svg {\\n transition: margin-right 0.5s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5059e648-7f35-4a24-bbfd-e1e27c4c78a6","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":"78ec8d30-0bc1-448b-a7fa-505bc44dbbd9","type":"procode","props":{"code":".next-button {\n --color-background: #5d3fd3;\n --color-background-hover: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"omz1qw64b\",\"name\":\"code\",\"code\":\".next-button {\\n --color-background: #5d3fd3;\\n --color-background-hover: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b68650cc-51f4-4194-8f2c-d4930edea2dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text and arrow color here:","styles":{}}],"children":[]},{"id":"34d30dba-fe00-49a8-a778-38dc089da1ed","type":"procode","props":{"code":".next-button {\n --color-text: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9erqk3kv5\",\"name\":\"code\",\"code\":\".next-button {\\n --color-text: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4eb81dd8-f09e-4749-a078-af2ad95dd8d6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the full button scale here:","styles":{}}],"children":[]},{"id":"760b57e8-07aa-4adc-b114-0b0762ad1f6c","type":"procode","props":{"code":".next-button {\n --main-size: 2em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"10nk86mku\",\"name\":\"code\",\"code\":\".next-button {\\n --main-size: 2em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"962da72c-e955-4349-9d9d-5747155f4476","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button padding here:","styles":{}}],"children":[]},{"id":"970f8bbb-e0ee-460b-825d-7d889d6d3dc8","type":"procode","props":{"code":".next-button {\n padding: 0.33em 0 0.33em 0.66em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dyvhdzdlv\",\"name\":\"code\",\"code\":\".next-button {\\n padding: 0.33em 0 0.33em 0.66em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7c9245e0-e856-486d-8898-639d89c5c015","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the arrow size here:","styles":{}}],"children":[]},{"id":"9d7d2fdd-e9e1-4bc2-9d2c-dfe9bb3ed6f5","type":"procode","props":{"code":".next-button svg {\n height: 0.8em;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hts1arx90\",\"name\":\"code\",\"code\":\".next-button svg {\\n height: 0.8em;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fb143f9c-8b73-46ba-a783-5eb0902eaf60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]