From bc58937edc8852ac446cd9e0d3f289a75be6f5cb Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Sun, 6 Mar 2022 11:39:13 +0530 Subject: [PATCH] day 20 completed --- my code/20-button-ripple-effect/index.html | 19 +++++++++ my code/20-button-ripple-effect/script.js | 12 ++++++ my code/20-button-ripple-effect/style.css | 47 ++++++++++++++++++++++ 3 files changed, 78 insertions(+) create mode 100644 my code/20-button-ripple-effect/index.html create mode 100644 my code/20-button-ripple-effect/script.js create mode 100644 my code/20-button-ripple-effect/style.css 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; + } +}