Animated Arrow Fill Button Purple

[{"id":"deca2c9c-7f66-46a4-bfc6-eda2e7949131","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"75a160e6-4f13-4ceb-b1bc-2b74c3ce77c3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #212121;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.animated-arrow-button {\\n position: relative;\\n display: flex;\\n align-items: center;\\n gap: 4px;\\n\\n padding: 16px 36px;\\n border: 4px solid transparent;\\n border-radius: 100px;\\n\\n background-color: inherit;\\n color: #8b5cf6;\\n\\n font-size: 16px;\\n font-weight: 600;\\n\\n box-shadow: 0 0 0 2px #8b5cf6;\\n cursor: pointer;\\n overflow: hidden;\\n\\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.arrow-icon {\\n position: absolute;\\n width: 24px;\\n fill: #8b5cf6;\\n z-index: 9;\\n\\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.arrow-icon-right {\\n right: 16px;\\n}\\n\\n.arrow-icon-left {\\n left: -25%;\\n}\\n\\n.button-fill-circle {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n\\n width: 20px;\\n height: 20px;\\n border-radius: 50%;\\n\\n background-color: #8b5cf6;\\n opacity: 0;\\n transform: translate(-50%, -50%);\\n\\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.button-text {\\n position: relative;\\n z-index: 1;\\n\\n transform: translateX(-12px);\\n\\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.animated-arrow-button:hover {\\n color: #ffffff;\\n border-radius: 12px;\\n box-shadow: 0 0 0 12px transparent;\\n}\\n\\n.animated-arrow-button:hover .arrow-icon-right {\\n right: -25%;\\n}\\n\\n.animated-arrow-button:hover .arrow-icon-left {\\n left: 16px;\\n}\\n\\n.animated-arrow-button:hover .button-text {\\n transform: translateX(12px);\\n}\\n\\n.animated-arrow-button:hover .arrow-icon {\\n fill: #ffffff;\\n}\\n\\n.animated-arrow-button:hover .button-fill-circle {\\n width: 220px;\\n height: 220px;\\n opacity: 1;\\n}\\n\\n.animated-arrow-button:active {\\n scale: 0.95;\\n box-shadow: 0 0 0 4px #8b5cf6;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .animated-arrow-button,\\n .arrow-icon,\\n .button-fill-circle,\\n .button-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Animated Arrow Fill Button Purple\\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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"0c4053e1-e2cc-4640-974c-799cca717a8b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8070363e-fa2a-49af-afc9-be2068e2bc0d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"07aa33f7-4c54-4fd8-b506-161678dd7042","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"df733a06-0e9f-4e47-b385-f220b4d89de6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"1e57e0f5-82b6-4898-ad86-17031940e062","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #212121;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.animated-arrow-button {\\n position: relative;\\n display: flex;\\n align-items: center;\\n gap: 4px;\\n\\n padding: 16px 36px;\\n border: 4px solid transparent;\\n border-radius: 100px;\\n\\n background-color: inherit;\\n color: #8b5cf6;\\n\\n font-size: 16px;\\n font-weight: 600;\\n\\n box-shadow: 0 0 0 2px #8b5cf6;\\n cursor: pointer;\\n overflow: hidden;\\n\\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.arrow-icon {\\n position: absolute;\\n width: 24px;\\n fill: #8b5cf6;\\n z-index: 9;\\n\\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.arrow-icon-right {\\n right: 16px;\\n}\\n\\n.arrow-icon-left {\\n left: -25%;\\n}\\n\\n.button-fill-circle {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n\\n width: 20px;\\n height: 20px;\\n border-radius: 50%;\\n\\n background-color: #8b5cf6;\\n opacity: 0;\\n transform: translate(-50%, -50%);\\n\\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.button-text {\\n position: relative;\\n z-index: 1;\\n\\n transform: translateX(-12px);\\n\\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\\n}\\n\\n.animated-arrow-button:hover {\\n color: #ffffff;\\n border-radius: 12px;\\n box-shadow: 0 0 0 12px transparent;\\n}\\n\\n.animated-arrow-button:hover .arrow-icon-right {\\n right: -25%;\\n}\\n\\n.animated-arrow-button:hover .arrow-icon-left {\\n left: 16px;\\n}\\n\\n.animated-arrow-button:hover .button-text {\\n transform: translateX(12px);\\n}\\n\\n.animated-arrow-button:hover .arrow-icon {\\n fill: #ffffff;\\n}\\n\\n.animated-arrow-button:hover .button-fill-circle {\\n width: 220px;\\n height: 220px;\\n opacity: 1;\\n}\\n\\n.animated-arrow-button:active {\\n scale: 0.95;\\n box-shadow: 0 0 0 4px #8b5cf6;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .animated-arrow-button,\\n .arrow-icon,\\n .button-fill-circle,\\n .button-text {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93557755-08d4-44a1-9f18-36128d019c56","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d56ff4eb-bf66-42c7-984e-46fdfe960d3f","type":"divider","props":{},"children":[]},{"id":"3995b75e-6d92-46b3-aabd-4d08c47a6fc9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"63e162c8-7940-4ff0-941b-a54df1c7f161","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses four parts inside one button.","styles":{}}],"children":[]},{"id":"d16ec508-98c3-4548-b314-2bd409fa8911","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"e18y0pubp\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5438847f-4b33-4da3-87b4-f9e562cf6fa4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The left arrow starts outside the button.\n\nThe text stays in the middle.\n\nThe circle becomes the purple hover fill.\n\nThe right arrow is visible by default.","styles":{}}],"children":[]},{"id":"af707b7f-98ac-4c45-a35c-37a30c0a7e28","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe preview is centered with flex.","styles":{}}],"children":[]},{"id":"8be19513-fc9e-4836-a629-c072a1f588fa","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #212121;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gjm09np8r\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #212121;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b715ba8e-d73b-4103-85d9-0d42db8d1635","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n\nThe button starts as a rounded outline button.","styles":{}}],"children":[]},{"id":"8dd243b1-f6bf-4214-95e9-ee6e5e13d7dc","type":"procode","props":{"code":".animated-arrow-button {\n position: relative;\n overflow: hidden;\n border-radius: 100px;\n color: #8b5cf6;\n box-shadow: 0 0 0 2px #8b5cf6;\n}","language":"javascript","filename":"","files":"[{\"id\":\"t8mc8nyw2\",\"name\":\"code\",\"code\":\".animated-arrow-button {\\n position: relative;\\n overflow: hidden;\\n border-radius: 100px;\\n color: #8b5cf6;\\n box-shadow: 0 0 0 2px #8b5cf6;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e2fb11b-2f58-4a19-9f16-08c5bdd7b2b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" is important because the circle grows larger than the button, but it stays clipped inside the button shape.","styles":{}}],"children":[]},{"id":"ceed94c1-22f0-4285-aa36-fb1bb8f5ec31","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Setup\n\nBoth arrows use absolute position.","styles":{}}],"children":[]},{"id":"6a57c65d-e32e-4573-90a5-c9b352b28f55","type":"procode","props":{"code":".arrow-icon {\n position: absolute;\n width: 24px;\n fill: #8b5cf6;\n z-index: 9;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jczdlqina\",\"name\":\"code\",\"code\":\".arrow-icon {\\n position: absolute;\\n width: 24px;\\n fill: #8b5cf6;\\n z-index: 9;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2bc726de-ea9c-4f6a-95af-f448db2fe76a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The right arrow is visible first.","styles":{}}],"children":[]},{"id":"b1eb7683-3b92-4439-a20c-8c104c7f3a6d","type":"procode","props":{"code":".arrow-icon-right {\n right: 16px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o6phaolao\",\"name\":\"code\",\"code\":\".arrow-icon-right {\\n right: 16px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e07dd50f-45dd-4e7a-b0d3-a524f3c9b8ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The left arrow starts outside.","styles":{}}],"children":[]},{"id":"738cce77-f6f6-489f-9eee-f1eee1a71135","type":"procode","props":{"code":".arrow-icon-left {\n left: -25%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"n4i1cw44u\",\"name\":\"code\",\"code\":\".arrow-icon-left {\\n left: -25%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e5b084d-5ebb-4925-be78-a89a5892e477","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Circle\n\nThe circle starts small from the center.","styles":{}}],"children":[]},{"id":"db28d7ae-8617-4eeb-b8b9-a9367e8239cb","type":"procode","props":{"code":".button-fill-circle {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n background-color: #8b5cf6;\n border-radius: 50%;\n opacity: 0;\n transform: translate(-50%, -50%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"q08z3yk6g\",\"name\":\"code\",\"code\":\".button-fill-circle {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 20px;\\n height: 20px;\\n background-color: #8b5cf6;\\n border-radius: 50%;\\n opacity: 0;\\n transform: translate(-50%, -50%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a9f16ab-9a6e-4049-8881-8ed52e0b50cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill\n\nOn hover, the circle grows until it fills the whole button.","styles":{}}],"children":[]},{"id":"48e41bf6-eaa6-4497-9eb2-b07385745c54","type":"procode","props":{"code":".animated-arrow-button:hover .button-fill-circle {\n width: 220px;\n height: 220px;\n opacity: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rkufq9k7i\",\"name\":\"code\",\"code\":\".animated-arrow-button:hover .button-fill-circle {\\n width: 220px;\\n height: 220px;\\n opacity: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5c27a74f-2f7d-4164-9114-a2119971e053","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the purple fill animation.","styles":{}}],"children":[]},{"id":"7076d94a-a00a-43f3-9eb5-2007dcd67324","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Swap\n\nThe default right arrow moves out.","styles":{}}],"children":[]},{"id":"bf3148fe-22d0-45ff-ac9e-b438b198bc98","type":"procode","props":{"code":".animated-arrow-button:hover .arrow-icon-right {\n right: -25%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"3314wx74g\",\"name\":\"code\",\"code\":\".animated-arrow-button:hover .arrow-icon-right {\\n right: -25%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a7a4acb1-16f3-4690-97c9-9a1c1f7f43e5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The left arrow moves in.","styles":{}}],"children":[]},{"id":"8c5ce6d7-b188-4ed6-8800-d0ab77925b76","type":"procode","props":{"code":".animated-arrow-button:hover .arrow-icon-left {\n left: 16px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"t7jpy6ca9\",\"name\":\"code\",\"code\":\".animated-arrow-button:hover .arrow-icon-left {\\n left: 16px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0b0b1b81-2ed4-41b4-a0c1-e5bbed443226","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Movement\n\nThe text starts slightly left.","styles":{}}],"children":[]},{"id":"87db7ba8-623e-4796-83de-85e952e6688e","type":"procode","props":{"code":".button-text {\n transform: translateX(-12px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"uky5joy7u\",\"name\":\"code\",\"code\":\".button-text {\\n transform: translateX(-12px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33a75257-e939-4841-a178-c5126112e06c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, it moves to the right.","styles":{}}],"children":[]},{"id":"163ecc50-5164-42db-8358-35b48c63ec6f","type":"procode","props":{"code":".animated-arrow-button:hover .button-text {\n transform: translateX(12px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"4muefgkwx\",\"name\":\"code\",\"code\":\".animated-arrow-button:hover .button-text {\\n transform: translateX(12px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4551d18f-8b29-45f5-88b3-6dd0f9c8b4ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Color\n\nWhen the purple circle fills the button, the text and arrow become white.","styles":{}}],"children":[]},{"id":"749aa62b-4601-4d23-866f-3ba0d6466ac8","type":"procode","props":{"code":".animated-arrow-button:hover {\n color: #ffffff;\n}\n\n.animated-arrow-button:hover .arrow-icon {\n fill: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kxb2d5mbm\",\"name\":\"code\",\"code\":\".animated-arrow-button:hover {\\n color: #ffffff;\\n}\\n\\n.animated-arrow-button:hover .arrow-icon {\\n fill: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7b36a35-32a3-4f3b-a31f-d029c5bdc1c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press\n\nWhen clicked, the button scales down.","styles":{}}],"children":[]},{"id":"43c17df8-f70c-488f-8c50-5508dd4dffa2","type":"procode","props":{"code":".animated-arrow-button:active {\n scale: 0.95;\n box-shadow: 0 0 0 4px #8b5cf6;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bytxyvs8l\",\"name\":\"code\",\"code\":\".animated-arrow-button:active {\\n scale: 0.95;\\n box-shadow: 0 0 0 4px #8b5cf6;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dca07425-16e5-474e-9cce-8614614f368e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Timing\n\nThe main motion uses this easing.","styles":{}}],"children":[]},{"id":"1a900104-7a4e-46a8-820c-2181f6314e2f","type":"procode","props":{"code":"cubic-bezier(0.23, 1, 0.32, 1)","language":"javascript","filename":"","files":"[{\"id\":\"3c77jrlr4\",\"name\":\"code\",\"code\":\"cubic-bezier(0.23, 1, 0.32, 1)\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bdf3e0f8-a39c-4ba3-85eb-4da5b88149b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the arrow, text, and fill circle feel smooth and slightly elastic.","styles":{}}],"children":[]},{"id":"ec252b7d-6c4f-495b-93ca-4003cf5276ea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n\nThe animation is removed for users who prefer reduced motion.","styles":{}}],"children":[]},{"id":"7a4bd2e7-745f-4805-88f6-f4dbf5011279","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .animated-arrow-button,\n .arrow-icon,\n .button-fill-circle,\n .button-text {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"glleo1qlo\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .animated-arrow-button,\\n .arrow-icon,\\n .button-fill-circle,\\n .button-text {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fb60a218-6841-4e45-a909-9b2ee936353e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]