diff --git a/my code/20-button-ripple-effect/index.html b/my code/20-button-ripple-effect/index.html
new file mode 100644
index 0000000..2d55523
--- /dev/null
+++ b/my code/20-button-ripple-effect/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ 20 button ripple effect
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/my code/20-button-ripple-effect/script.js b/my code/20-button-ripple-effect/script.js
new file mode 100644
index 0000000..5c6299e
--- /dev/null
+++ b/my code/20-button-ripple-effect/script.js
@@ -0,0 +1,12 @@
+const button = document.querySelector("button");
+
+button.addEventListener("click", (e) => {
+ const circle = document.createElement("div");
+ circle.classList.add("circle");
+ circle.style.left = `${e.clientX - e.target.offsetLeft}px`;
+ circle.style.top = `${e.clientY - e.target.offsetTop}px`;
+ console.log(e);
+ button.appendChild(circle);
+
+ setTimeout(() => circle.remove(), 500);
+});
diff --git a/my code/20-button-ripple-effect/style.css b/my code/20-button-ripple-effect/style.css
new file mode 100644
index 0000000..285696d
--- /dev/null
+++ b/my code/20-button-ripple-effect/style.css
@@ -0,0 +1,47 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: #010101;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+button {
+ background-color: #99319b;
+ color: #fff;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 18px;
+ padding: 15px 30px;
+ border: unset;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ position: relative;
+ overflow: hidden;
+}
+
+button:focus {
+ outline: none;
+}
+
+button .circle {
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.75);
+ border: 2px solid #fff;
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ transform: translate(-50%, -50%) scale(0);
+ animation: scale 0.5s linear;
+}
+
+@keyframes scale {
+ to {
+ transform: translate(-50%, -50%) scale(3);
+ opacity: 0;
+ }
+}