{"id":2043,"date":"2023-02-27T17:18:45","date_gmt":"2023-02-27T17:18:45","guid":{"rendered":"https:\/\/matata.in\/?page_id=2043"},"modified":"2023-02-27T17:45:20","modified_gmt":"2023-02-27T17:45:20","slug":"ripple-effect","status":"publish","type":"page","link":"https:\/\/matata.in\/index.php\/ripple-effect\/","title":{"rendered":"Ripple effect"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2043\" class=\"elementor elementor-2043\">\n\t\t\t\t\t\t\t\t\t<section data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-982bf07 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"982bf07\" data-element_type=\"section\">\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-aea31ba\" data-id=\"aea31ba\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f655a6f elementor-widget elementor-widget-html\" data-id=\"f655a6f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n    <title>\r\n\ttest\r\n    <\/title>\r\n\r\n    <style>\r\n        \/* CSS *\/\r\n\r\n\r\n    @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Roboto&display=swap\");\r\n\r\nbutton {\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: background 400ms;\r\n  color: #fff;\r\n  background-color: #6200ee;\r\n  padding: 150px;\r\n  font-family: \"Roboto\", sans-serif;\r\n  font-size: 1.5rem;\r\n  outline: 0;\r\n  border: 0;\r\n  border-radius: 0.25rem;\r\n  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); \/* black with 30% opacity *\/\r\n  cursor: pointer;\r\n}\r\n\r\nspan.ripple {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  transform: scale(0);\r\n  animation: ripple 600ms linear;\r\n  background-color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n@keyframes ripple {\r\n  to {\r\n    transform: scale(4);\r\n    opacity: 10;\r\n  }\r\n}\r\n\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n    <script>\r\nfunction createRipple(event) {\r\n  const button = event.currentTarget;\r\n\r\n  const circle = document.createElement(\"span\");\r\n  const diameter = Math.max(button.clientWidth, button.clientHeight);\r\n  const radius = diameter \/ 2;\r\n\r\n  circle.style.width = circle.style.height = `${diameter}px`;\r\n  circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;\r\n  circle.style.top = `${event.clientY - button.offsetTop - radius}px`;\r\n  circle.classList.add(\"ripple\");\r\n\r\n  const ripple = button.getElementsByClassName(\"ripple\")[0];\r\n\r\n  if (ripple) {\r\n    ripple.remove();\r\n  }\r\n\r\n  button.appendChild(circle);\r\n}\r\n\r\nconst buttons = document.getElementsByTagName(\"button\");\r\nfor (const button of buttons) {\r\n  button.addEventListener(\"click\", createRipple);\r\n}\r\n    <\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-eb4ffd0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"eb4ffd0\" data-element_type=\"section\">\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-6c05576\" data-id=\"6c05576\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-425c138 button elementor-widget elementor-widget-button\" data-id=\"425c138\" data-element_type=\"widget\" id=\"button\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a href=\"#\" class=\"elementor-button-link elementor-button elementor-size-sm\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>test Click here<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/pages\/2043"}],"collection":[{"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/comments?post=2043"}],"version-history":[{"count":21,"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/pages\/2043\/revisions"}],"predecessor-version":[{"id":2065,"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/pages\/2043\/revisions\/2065"}],"wp:attachment":[{"href":"https:\/\/matata.in\/index.php\/wp-json\/wp\/v2\/media?parent=2043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}