Arrow Move Dot Button

[{"id":"60a51614-b04e-403b-8e5e-8c7f13ba2d6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4fcb0228-38bd-4c77-b745-52bea16a9068","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.dot-action {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n width: 170px;\\n min-height: 51px;\\n padding: 3px;\\n background-color: #1d2129;\\n border: none;\\n border-radius: 40px;\\n box-shadow: 0 5px 10px #bebebe;\\n cursor: pointer;\\n overflow: hidden;\\n}\\n\\n.dot-action__label {\\n width: calc(170px - 51px);\\n height: 45px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n color: #ffffff;\\n font-size: 1.1em;\\n letter-spacing: 1.2px;\\n line-height: 1;\\n white-space: nowrap;\\n}\\n\\n.dot-action__circle {\\n width: 45px;\\n height: 45px;\\n flex: 0 0 45px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background-color: #5d3fd3;\\n border: 3px solid #1d2129;\\n border-radius: 50%;\\n}\\n\\n.dot-action__circle svg {\\n transition-duration: 1.5s;\\n}\\n\\n.dot-action__circle svg circle {\\n fill: #ffffff;\\n}\\n\\n.dot-action:hover .dot-action__circle svg {\\n animation: dot-action-move 1s linear infinite;\\n}\\n\\n.dot-action:active {\\n transform: scale(0.96);\\n}\\n\\n@keyframes dot-action-move {\\n 0% {\\n opacity: 0;\\n transform: translateX(0);\\n }\\n\\n 100% {\\n opacity: 1;\\n transform: translateX(10px);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .dot-action,\\n .dot-action__circle svg {\\n transition: none;\\n }\\n\\n .dot-action:hover .dot-action__circle svg {\\n animation: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Arrow Move Dot Button\\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":"4c776002-b05f-475a-ae5e-15202445bb84","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"fc93b690-57c6-40b4-b007-0cfa95193512","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"6f3eb71d-e04c-40b8-a3ae-a8f7cb39b372","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b218d89c-bd16-43ab-91f0-0f58cefce9c6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"c2bdd67b-5e31-43de-bd45-2e13dc6727fe","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.dot-action {\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n width: 170px;\\n min-height: 51px;\\n padding: 3px;\\n background-color: #1d2129;\\n border: none;\\n border-radius: 40px;\\n box-shadow: 0 5px 10px #bebebe;\\n cursor: pointer;\\n overflow: hidden;\\n}\\n\\n.dot-action__label {\\n width: calc(170px - 51px);\\n height: 45px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n color: #ffffff;\\n font-size: 1.1em;\\n letter-spacing: 1.2px;\\n line-height: 1;\\n white-space: nowrap;\\n}\\n\\n.dot-action__circle {\\n width: 45px;\\n height: 45px;\\n flex: 0 0 45px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background-color: #5d3fd3;\\n border: 3px solid #1d2129;\\n border-radius: 50%;\\n}\\n\\n.dot-action__circle svg {\\n transition-duration: 1.5s;\\n}\\n\\n.dot-action__circle svg circle {\\n fill: #ffffff;\\n}\\n\\n.dot-action:hover .dot-action__circle svg {\\n animation: dot-action-move 1s linear infinite;\\n}\\n\\n.dot-action:active {\\n transform: scale(0.96);\\n}\\n\\n@keyframes dot-action-move {\\n 0% {\\n opacity: 0;\\n transform: translateX(0);\\n }\\n\\n 100% {\\n opacity: 1;\\n transform: translateX(10px);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .dot-action,\\n .dot-action__circle svg {\\n transition: none;\\n }\\n\\n .dot-action:hover .dot-action__circle svg {\\n animation: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"11b35345-4ba5-47f3-8c47-9f9567a5c2f6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"2369f1d2-f0bb-42fc-b6fa-ebf022650dc2","type":"divider","props":{},"children":[]},{"id":"b5f8d733-e5ac-4c4a-b824-013fac0831e3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"f06a6052-8729-437c-9d45-a337b7b4c1f2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The main button wrapper uses:","styles":{}}],"children":[]},{"id":"0da20993-f34f-45cd-a8c0-cfde3a640630","type":"procode","props":{"code":"