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