Button Ripple Effect

button-ripple-effect.markdown

Button Ripple Effect

A Pen by Florin Pop on CodePen.

License.

index.html

<button>Click me</button>

script.js

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);
	});
});

style.css

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;
    }
}