Skip to content

Instantly share code, notes, and snippets.

@Secret-chest
Created January 5, 2022 12:02
Show Gist options
  • Save Secret-chest/f9e8aefca21cb92a4a5858bfe1947e5a to your computer and use it in GitHub Desktop.
Save Secret-chest/f9e8aefca21cb92a4a5858bfe1947e5a to your computer and use it in GitHub Desktop.
Button Ripple Effect
<button>Click me</button>
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);
});
});
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