Sliding Arrow Collaborate Button

[{"id":"38eaf005-e3c5-4e66-a611-aff2357e55b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d4901708-3009-480a-b333-d470390fb474","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-speed: 500ms;\\n --button-bg: #111111;\\n --button-text: #ffffff;\\n --icon-bg: #ffffff;\\n --icon-text: #111111;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.button-preview-center {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.slide-arrow-button {\\n position: relative;\\n width: fit-content;\\n height: 48px;\\n padding: 4px 56px 4px 24px;\\n border: 0;\\n border-radius: 999px;\\n background: var(--button-bg);\\n color: var(--button-text);\\n overflow: hidden;\\n cursor: pointer;\\n font-size: 14px;\\n font-weight: 500;\\n transition:\\n padding var(--button-speed) ease,\\n transform 180ms ease;\\n}\\n\\n.slide-arrow-button:hover {\\n padding-left: 56px;\\n padding-right: 24px;\\n}\\n\\n.slide-arrow-button:active {\\n transform: scale(0.96);\\n}\\n\\n.slide-arrow-button:focus-visible {\\n outline: 2px solid currentColor;\\n outline-offset: 4px;\\n}\\n\\n.slide-arrow-label {\\n position: relative;\\n z-index: 2;\\n transition: transform var(--button-speed) ease;\\n}\\n\\n.slide-arrow-icon {\\n position: absolute;\\n top: 4px;\\n right: 4px;\\n width: 40px;\\n height: 40px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: 999px;\\n background: var(--icon-bg);\\n color: var(--icon-text);\\n transition:\\n right var(--button-speed) ease,\\n transform var(--button-speed) ease;\\n}\\n\\n.slide-arrow-button:hover .slide-arrow-icon {\\n right: calc(100% - 44px);\\n transform: rotate(45deg);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .slide-arrow-button,\\n .slide-arrow-label,\\n .slide-arrow-icon {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Sliding Arrow Collaborate Button\\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","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"dc1cd836-5e40-41cc-a3f0-9560ef4f2f16","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"aa6f92f5-aefb-44c3-a139-95ad5e84b656","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"6187c794-bbb8-4520-85e8-973c1ce93a4b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5143ad16-1275-4797-9653-8a6b39424acc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"9a5a8d4e-f84c-43fb-af4b-eaea3107776c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-speed: 500ms;\\n --button-bg: #111111;\\n --button-text: #ffffff;\\n --icon-bg: #ffffff;\\n --icon-text: #111111;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.button-preview-center {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.slide-arrow-button {\\n position: relative;\\n width: fit-content;\\n height: 48px;\\n padding: 4px 56px 4px 24px;\\n border: 0;\\n border-radius: 999px;\\n background: var(--button-bg);\\n color: var(--button-text);\\n overflow: hidden;\\n cursor: pointer;\\n font-size: 14px;\\n font-weight: 500;\\n transition:\\n padding var(--button-speed) ease,\\n transform 180ms ease;\\n}\\n\\n.slide-arrow-button:hover {\\n padding-left: 56px;\\n padding-right: 24px;\\n}\\n\\n.slide-arrow-button:active {\\n transform: scale(0.96);\\n}\\n\\n.slide-arrow-button:focus-visible {\\n outline: 2px solid currentColor;\\n outline-offset: 4px;\\n}\\n\\n.slide-arrow-label {\\n position: relative;\\n z-index: 2;\\n transition: transform var(--button-speed) ease;\\n}\\n\\n.slide-arrow-icon {\\n position: absolute;\\n top: 4px;\\n right: 4px;\\n width: 40px;\\n height: 40px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: 999px;\\n background: var(--icon-bg);\\n color: var(--icon-text);\\n transition:\\n right var(--button-speed) ease,\\n transform var(--button-speed) ease;\\n}\\n\\n.slide-arrow-button:hover .slide-arrow-icon {\\n right: calc(100% - 44px);\\n transform: rotate(45deg);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .slide-arrow-button,\\n .slide-arrow-label,\\n .slide-arrow-icon {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9fb4ecd2-6ec4-4a17-8b70-c152c1b8ca05","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f077c558-d612-48bc-ac88-7d22e7ba5748","type":"divider","props":{},"children":[]},{"id":"e60f5c96-e684-4e63-8d32-7908382ee3bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9de95ab9-fb17-4a02-baa5-26f3266e8dfd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]