<button class="element">The Button</button>
body {
  font-family: "Oswald", sans-serif;
  padding: 40px;
  background: #fcfeff;
}

.element {
  padding: 10px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid rgba(23, 26, 31, 0.1);
  box-shadow: 0 7px 25px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  background: #fff;
  font-size: 15px;
  color: #252525;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color 0.35s ease-in-out, background 0.35s ease-in-out;
}

.element:hover {
  background: #5d15ff;
  color: #fff;
}
const musicalEffects = () => {
  const element = document.querySelector(".element");
  const audio = new Audio();
  const path = `https://moonpresence.site/moonpresence/media/sounds/`;

  const audioPlayClick = () => {
    audio.src = `${path}sound-1.mp3`;
    audio.play();
  };

  const audioPlayHover = () => {
    audio.src = `${path}sound-2.mp3`;
    audio.play();
  };

  const audioPause = () => {
    audio.pause();
    audio.currentTime = 0;
  };

  element.addEventListener("mouseover", audioPlayHover);
  element.addEventListener("click", audioPlayClick);
  element.addEventListener("mouseout", audioPause);
};

document.addEventListener("DOMContentLoaded", musicalEffects);
View Compiled

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.