Ripple Effect

h751",{"username":"Mukesh751","initialButtons":[{"id":"dwUHjkfnXeiEfq8OTtNL","html":"\n\n \n \n Ripple Effect\n \n \n\n Click Me!!!\n \n\n\n","css":"*{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n}\nbody{\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n background: rgb(4, 0, 0);\n gap: 20px;\n min-height: 100vh;\n}\n.btn{\n position: relative;\n padding: 12px 40px;\n font-size: 1.05em;\n border-radius: 40px;\n background: rgb(71, 64, 64);\n color:rgb(198, 198, 60);\n letter-spacing: 0.15em;\n text-decoration: none;\n text-transform: uppercase;\n user-select: none;\n transition: 0.5s;\n overflow: hidden;\n}\n.btn:hover{\n color:white;\n}\n.btn span{\n position: absolute;\n border: 2px solid white;\n transform: translate(-50%,-50%);\n pointer-events: none;\n border-radius: 50%;\n filter: brightness(2);\n animation: animate 2s linear infinite;\n}\n@keyframes animate {\n 0%{\n width: 0;\n height: 0;\n }\n 100%{\n width: 350px;\n height: 350px;\n }\n}","js":"","githubUsername":"Mukesh751","title":"Ripple Effect","displayName":"","likeCounter":0,"likedUsers":[],"status":"approved","styling":"css","compiledCss":"","categories":[],"createdAt":{"seconds":1757851452}}],"initialProfile":{"id":"8OMq5UCxaicavpITRdtk","githubUsername":"Mukesh751","name":"","bio":"","profilePictureUrl":"https://avatars.githubusercontent.com/u/91366697?v=4"},"serverLoaded":true}]]}],"$L22"] c:null 11:[["$","title","0",{"children":"@Mukesh751: animated button creator | Animating Buttons"}],["$","meta","1",{"name":"description","content":"Explore 1 published animated button by @Mukesh751. 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/Mukesh751"}],["$","meta","4",{"name":"author","content":"Mukesh751"}],["$","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":"Mukesh751"}],["$","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/Mukesh751"}],["$","meta","12",{"property":"og:title","content":"@Mukesh751: animated button creator | Animating Buttons"}],["$","meta","13",{"property":"og:description","content":"Explore 1 published animated button by @Mukesh751. Preview CSS and JavaScript interactions and reuse the code in your project."}],["$","meta","14",{"property":"og:url","content":"h

The collection [1]