Download Button Animation

[{"id":98,"created_at":"2023-10-24T06:38:52.335237+00:00","html":"\n\n

\n\n\n","css":"body {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\nheight: 100%;\n}\n\n\n.download-btn {\n position: relative;\n font-size: 1.15rem;\n width: 8rem;\n height: 3rem;\n font-weight: 700;\n border: 0;\n border-radius: 100vmax;\n color: #fff;\n background-color: rgb(29, 155, 240);\n cursor: pointer;\n transition: all 300ms ease-in;\n}\n\n.download-btn::before {\n content: \"Done\";\n position: absolute;\n color: rgb(29, 165, 29);\n left: 50%;\n top: -2rem;\n transform: translateX(-50%);\n opacity: 0;\n}\n\n.download-btn.clicked {\n width: 20rem;\n height: 0.5rem;\n background-color: rgb(206, 224, 237);\n animation: fill 1.5s ease-out 1 forwards;\n animation-delay: 450ms;\n\n}\n\n.download-btn.clicked::before {\n animation: show 250ms ease-in 1 forwards;\n animation-delay: 2s;\n}\n\n@keyframes fill {\n 0% {\n box-shadow: 0 0 0 rgb(29, 155, 240) inset;\n }\n\n 95% {\n box-shadow: 20em 0 0 rgb(29, 155, 240) inset;\n }\n\n 100% {\n box-shadow: 20em 0 0 rgb(29, 165, 29) inset;\n }\n}\n\n@keyframes show {\n 100% {\n opacity: 1;\n }\n}\n\n.source>a {\n text-decoration: none;\n color: #00AAEC;\n\n}\n\n.source {\n padding: 5px;\n border: 1px solid #00AAEC;\n width: fit-content;\n border-radius: 4px;\n position: absolute;\n top: 0px;\n left: 0;\n margin: 10px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.source:hover {\n opacity: 70%;\n}\n\nstylex\n\n\n","js":"let downloadBtn = document.getElementById('downloadBtn');\n\ndownloadBtn.addEventListener(\"click\", (event) => {\n let btn = event.target;\n btn.classList.add('clicked');\n btn.textContent = '';\n\n setTimeout(() => {\n btn.classList.remove('clicked')\n btn.textContent = \"Download\"\n }, 4000)\n})\n\n// console.log('gsls')\n\n\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"1c6R3k","description":"Download Button Animation","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\tDownload Button Animation\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n \\n\\t\\n\\t\\n\\t\\t\\r\\n\\r\\n

\\r\\n \\r\\n Source\\r\\n

\\n\\t\\t\\n \\n\\t\\n\"}]","view":[{"views":727}],"profiles":{"username":"devcanvas"}}]