<button>It's time for Confetti!</button>

html,
body {
	margin: 0;
	padding: 0;
	width: 100wh;
	height: 100vh;
	background: black;
	font-weight: 100;
	font-family: sans-serif;
}

body {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

button {
	position: relative;
	bottom: 20%;
	font-size: 24pt;
	letter-spacing: 3px;
	background: #9b1c2c;
	border: none;
	border-radius: 5px;
	color: white;
	cursor: pointer;
	transition: all 0.4s;
	padding: 10px 20px;
}

button:hover {
	color: #041e42;
}

button:focus {
	outline: none;
}

import confetti from "https://cdn.skypack.dev/canvas-confetti";
const doItNow = (evt, hard) => {
	const direction = Math.sign(lastX - evt.clientX);
	lastX = evt.clientX;
	const particleCount = hard ? r(122, 245) : r(2, 15);
	confetti({
		particleCount,
		angle: r(90, 90 + direction * 30),
		spread: r(45, 80),
		origin: {
			x: evt.clientX / window.innerWidth,
			y: evt.clientY / window.innerHeight
		}
	});
};
const doIt = (evt) => {
	doItNow(evt, false);
};

const doItHard = (evt) => {
	doItNow(evt, true);
};

let lastX = 0;
const butt = document.querySelector("button");
butt.addEventListener("mousemove", doIt);
butt.addEventListener("click", doItHard);

function r(mi, ma) {
	return parseInt(Math.random() * (ma - mi) + mi);
}