<button type="button" class="button button--confetti">confetti</button>
<button type="button" class="button button--sparkles">sparkles</button>

@import url('//fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap');

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: whitesmoke;
  
  & > * {
    margin-bottom: 60px;
  }
}

.button {
  padding: 30px 60px;
  border-radius: 200px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 900;
  cursor: pointer;
  border: clamp(2px, 1vw, 10px) solid #ccc;
  font-size: clamp(50px, 10vw, 250px);
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 300ms;

  &:hover {
    transform: scale(1.03);
  }
  
  &:active {
    filter: blur(4px);
    transform: scaleY(0.7) scaleX(0.8);
  }
  
  &--confetti {
    background: linear-gradient(90deg, hotpink, blueviolet);
    background-clip: text;
  }

  &--sparkles {
    background: linear-gradient(90deg, yellowgreen, gold);
    background-clip: text;
  }
  
  &--custom {
    background: linear-gradient(90deg, dodgerblue, navajowhite);
    background-clip: text;
  }
}

console.clear();

const confettiSound = new Audio('https://www.soundjay.com/misc/sounds/whip-whoosh-02.mp3');
const sparklesSound = new Audio('https://www.soundjay.com/misc/sounds/magic-chime-02.mp3');
const confettiButton = document.querySelector('.button--confetti');
 
document.querySelector('.button--confetti').addEventListener('mouseup', () => {
  party.confetti(confettiButton, {
    size: party.variation.range(0.6, 1)
  });
  
  confettiSound.play();
});

const sparklesButton = document.querySelector('.button--sparkles');

document.querySelector('.button--sparkles').addEventListener('mouseup', () => {
  party.sparkles(sparklesButton, {
    size: party.variation.range(0.6, 1)
  });
  sparklesSound.play();
});