From fb5469b845bb18c06c170e0e1df2264926efbbfc Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Mon, 26 Oct 2020 10:40:00 -0400 Subject: [PATCH] Button ripple effect --- button-ripple-effect/index.html | 13 +++++++++ button-ripple-effect/script.js | 23 +++++++++++++++ button-ripple-effect/style.css | 51 +++++++++++++++++++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 button-ripple-effect/index.html create mode 100644 button-ripple-effect/script.js create mode 100644 button-ripple-effect/style.css diff --git a/button-ripple-effect/index.html b/button-ripple-effect/index.html new file mode 100644 index 0000000..1c5eea8 --- /dev/null +++ b/button-ripple-effect/index.html @@ -0,0 +1,13 @@ + + + + + + + Button Ripple Effect + + + + + + diff --git a/button-ripple-effect/script.js b/button-ripple-effect/script.js new file mode 100644 index 0000000..b17ecf1 --- /dev/null +++ b/button-ripple-effect/script.js @@ -0,0 +1,23 @@ +const buttons = document.querySelectorAll('.ripple') + +buttons.forEach(button => { + button.addEventListener('click', function (e) { + const x = e.clientX + const y = e.clientY + + 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) + }) +}) \ No newline at end of file diff --git a/button-ripple-effect/style.css b/button-ripple-effect/style.css new file mode 100644 index 0000000..758a939 --- /dev/null +++ b/button-ripple-effect/style.css @@ -0,0 +1,51 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #000; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +button { + background-color: purple; + color: #fff; + border: 1px purple solid; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 2px; + padding: 20px 30px; + overflow: hidden; + margin: 10px 0; + position: relative; +} + +button:focus { + outline: none; +} + +button .circle { + position: absolute; + background-color: #fff; + width: 100px; + height: 100px; + border-radius: 50%; + transform: translate(-50%, -50%) scale(0); + animation: scale 0.5s ease-out; +} + +@keyframes scale { + to { + transform: translate(-50%, -50%) scale(3); + opacity: 0; + } +}