{"id":3667,"date":"2022-03-24T10:26:26","date_gmt":"2022-03-24T10:26:26","guid":{"rendered":"https:\/\/elementor.jimfahad.com\/elementor110\/?page_id=3667"},"modified":"2022-03-24T18:55:06","modified_gmt":"2022-03-24T18:55:06","slug":"20-button-ripple-effect-on-click","status":"publish","type":"page","link":"https:\/\/elementor.jimfahad.com\/elementor110\/20-button-ripple-effect-on-click\/","title":{"rendered":"020 Button Ripple Effect on Click"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3667\" class=\"elementor elementor-3667\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1680ea0 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"1680ea0\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-15586cc\" data-id=\"15586cc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3fecfaf elementor-widget__width-auto elementor-widget elementor-widget-button\" data-id=\"3fecfaf\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Button<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68b9573 elementor-widget__width-auto elementor-widget elementor-widget-button\" data-id=\"68b9573\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Button<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e77922 elementor-widget elementor-widget-html\" data-id=\"8e77922\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script type=\"text\/javascript\">\n    const buttons = document.querySelectorAll('.elementor-button');\n    buttons.forEach(btn => {\n        btn.addEventListener('click', function(e){\n            \n            let x = e.clientX - this.getBoundingClientRect().left;\n            let y = e.clientY - this.getBoundingClientRect().top;\n            \n            let ripples = document.createElement('span');\n            ripples.classList.add('click-effect');\n            ripples.style.left = x + \"px\";\n            ripples.style.top = y + \"px\";\n            this.appendChild(ripples);\n            \n            setTimeout(() => {\n                ripples.remove()\n            },1000);\n        })\n    })\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Button Button<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-3667","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/pages\/3667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/comments?post=3667"}],"version-history":[{"count":135,"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/pages\/3667\/revisions"}],"predecessor-version":[{"id":3816,"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/pages\/3667\/revisions\/3816"}],"wp:attachment":[{"href":"https:\/\/elementor.jimfahad.com\/elementor110\/wp-json\/wp\/v2\/media?parent=3667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}