Chnages the Repel Effect sahandghavidel#6

Akshat162001 · Akshat162001 · commit 4ad301129006 · 2023-07-12T00:18:35.000+05:30
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/projects/button-ripple-effect/index.html b/projects/button-ripple-effect/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <a href="#" class="btn"><span>Button</span></a>
+    <button class="ripple">Click Me</button>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/projects/button-ripple-effect/index.js b/projects/button-ripple-effect/index.js
@@ -1,9 +1,32 @@
-const btnEl = document.querySelector(".btn");
+// const btnEl = document.querySelector(".btn");
 
-btnEl.addEventListener("mouseover", (event) => {
-  const x = event.pageX - btnEl.offsetLeft;
-  const y = event.pageY - btnEl.offsetTop;
+// btnEl.addEventListener("mouseover", (event) => {
+//   const x = event.pageX - btnEl.offsetLeft;
+//   const y = event.pageY - btnEl.offsetTop;
 
-  btnEl.style.setProperty("--xPos", x + "px");
-  btnEl.style.setProperty("--yPos", y + "px");
-});
+//   btnEl.style.setProperty("--xPos", x + "px");
+//   btnEl.style.setProperty("--yPos", y + "px");
+// });
+const buttons = document.querySelectorAll('.ripple')
+
+buttons.forEach(button => {
+    button.addEventListener('click', function (e) {
+        const x = e.pageX
+        const y = e.pageY
+
+        const buttonTop = e.target.offsetTop
+        const buttonLeft = e.target.offsetLeft
+
+        const xInside = x - buttonLeft
+        const yInside = y - buttonTop
+
+        const circle = document.createElement('span')
+        circle.classList.add('circle')
+        circle.style.top = yInside + 'px'
+        circle.style.left = xInside + 'px'
+
+        this.appendChild(circle)
+
+        setTimeout(() => circle.remove(), 500)
+    })
+})
diff --git a/projects/button-ripple-effect/style.css b/projects/button-ripple-effect/style.css
@@ -1,43 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
 body {
-  margin: 0;
+  background-color: #000;
+  font-family: 'Roboto', sans-serif;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   height: 100vh;
-  align-items: center;
-  background-color: aliceblue;
-  font-family: sans-serif;
+  overflow: hidden;
+  margin: 0;
 }
 
-.btn {
-  background-color: pink;
-  padding: 20px 40px;
-  border-radius: 5px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  text-decoration: none;
-  color: black;
-  position: relative;
+button {
+  background-color: rgb(225, 12, 147);
+  color: #fff;
+  border: 1px rgb(235, 21, 89) solid;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  padding: 20px 30px;
   overflow: hidden;
+  margin: 10px 0;
+  position: relative;
+  border-radius: 4px;
 }
 
-.btn span {
-  position: relative;
-  z-index: 1;
+button:focus {
+  outline: none;
 }
 
-.btn::before {
-  content: "";
+button .circle {
   position: absolute;
-  background-color: orangered;
-  width: 0;
-  height: 0;
-  left: var(--xPos);
-  top: var(--yPos);
-  transform: translate(-50%, -50%);
+  background-color: #fff;
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
-  transition: width 0.5s, height 0.5s;
+  transform: translate(-50%, -50%) scale(0);
+  animation: scale 0.5s ease-out;
 }
 
-.btn:hover::before {
-  width: 300px;
-  height: 300px;
+@keyframes scale {
+  to {
+    transform: translate(-50%, -50%) scale(3);
+    opacity: 0;
+  }
 }
+

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "liveServer.settings.port": 5502`
	`3`	`+}`
-Original file line number
+Diff line change
     <link rel="stylesheet" href="style.css" />
   head>
   <body>
 -    <a href="#" class="btn"><span>Buttonspan>a>
 +    <button class="ripple">Click Mebutton>
     <script src="index.js">script>
   body>
 html>