A Pen by Florin Pop on CodePen.
Created
January 5, 2022 12:02
-
-
Save Secret-chest/f9e8aefca21cb92a4a5858bfe1947e5a to your computer and use it in GitHub Desktop.
Button Ripple Effect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button>Click me</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const buttons = document.querySelectorAll('button'); | |
buttons.forEach(button => { | |
button.addEventListener('click', function(e) { | |
let x = e.clientX; | |
let y = e.clientY; | |
let buttonTop = e.target.offsetTop; | |
let buttonLeft = e.target.offsetLeft; | |
let xInside = x - buttonLeft; | |
let yInside = y - buttonTop; | |
let 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); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #000; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
height: 100vh; | |
} | |
button { | |
color: #fff; | |
border: 1px solid purple; | |
background-color: purple; | |
font-size: 14px; | |
padding: 20px 30px; | |
letter-spacing: 2px; | |
text-transform: uppercase; | |
position: relative; | |
overflow: hidden; | |
margin: 10px 0; | |
} | |
button .circle { | |
position: absolute; | |
border-radius: 50%; | |
background-color: #fff; | |
width: 100px; | |
height: 100px; | |
transform: translate(-50%, -50%) scale(0); | |
animation: scale .5s ease-out; | |
} | |
button:focus { | |
outline: 0; | |
} | |
@keyframes scale { | |
to { | |
transform: translate(-50%, -50%) scale(3); | |
opacity: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment