Button_amrit2611

rit2611",{"username":"amrit2611","initialButtons":[{"id":"32mZ9RV0WQPdaBnRCa63","html":"\n\n\n \n \n \n Button_amrit2611\n \n\n\n

\n \n

\n\n\n","css":"/* The display flex property and other properties used below make it possible to center the div vertically and horizontally */\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: auto;\n min-height: 100%;\n}\n\nbody {\n margin: 0;\n height: 100%;\n}\n\nhtml {\n height: 100%;\n}\n\n/* For the code responsible for the animation, checkout the 'animation.js' file */","js":"const myButton = document.querySelector(\"#myButton\");\n\nmyButton.style.transform = \"scale(2)\";\n\n// We create the smooth scaling animation using the transition property.\n// Inside the transition property, we can mention all the properties that we want to be a part of the animation.\n// This is a simple scaling animation in which the button changes its color and scale when hovered.\n\nmyButton.addEventListener(\"mouseenter\", () => {\n myButton.style.boxShadow = \"0px 5px 10px rgba(0, 0, 0, 0.3)\";\n myButton.style.backgroundColor = \"black\";\n myButton.style.color = \"white\";\n myButton.style.transition =\n \"transform 0.4s ease-in-out, background-color 0.25s ease-in-out\";\n myButton.style.transform = \"scale(2.5)\";\n});\n\n// Below, we make the button go back to the initial state.\n\nmyButton.addEventListener(\"mouseleave\", () => {\n myButton.style.backgroundColor = \"white\";\n myButton.style.color = \"black\";\n myButton.style.boxShadow = \"none\";\n myButton.style.transform = \"scale(2)\";\n});\n","githubUsername":"amrit2611","title":"Button_amrit2611","displayName":"","likeCounter":0,"likedUsers":[],"status":"approved","styling":"css","compiledCss":"","categories":[],"createdAt":{"seconds":1757851452}}],"initialProfile":{"id":"xYUq2hCvlCm9AT2gx5K2","githubUsername":"amrit2611","name":"","bio":"","profilePictureUrl":"https://avatars.githubusercontent.com/u/81375472?v=4"},"serverLoaded":true}]]}],"$L22"] c:null 11:[["$","title","0",{"children":"@amrit2611: animated button creator | Animating Buttons"}],["$","meta","1",{"name":"description","content":"Explore 1 published animated button by @amrit2611. Preview CSS and JavaScript interactions and reuse the code in your project."}],["$","meta","2",{"name":"application-name","content":"Animating Buttons"}],["$","link","3",{"rel":"author","href":"https://getbuttons.tech/user/amrit2611"}],["$","meta","4",{"name":"author","content":"amrit2611"}],["$","link","5",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","meta","6",{"name":"keywords","content":"animating buttons,animated buttons,CSS buttons,HTML buttons,Tailwind CSS buttons,JavaScript buttons,button animations,community button collection,copy paste buttons,microinteractions"}],["$","meta","7",{"name":"creator","content":"amrit2611"}],["$","meta","8",{"name":"publisher","content":"Animating Buttons"}],["$","meta","9",{"name":"robots","content":"index, follow"}],["$","meta","10",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","11",{"rel":"canonical","href":"https://getbuttons.tech/user/amrit2611"}],["$","meta","12",{"property":"og:title","content":"@amrit2611: animated button creator | Animating Buttons"}],["$","meta","13",{"property":"og:description","content":"Explore 1 published animated button by @amrit2611. Preview CSS and JavaScript interactions and reuse the code in your project."}],["$","meta","14",{"property":"og:url","content":"https://getbuttons.tech/user/amrit2611"}],["$","meta","15",{"property":"og:site_name","content":"A

The collection [1]