<div class="wrapper">
  <div class="checkbox">
    <input type="checkbox" id="checkbox" onclick="pop()">
    <label for="checkbox" class="bubble"></label>
  </div>
  <div class="message">
    <h3><strong>Pop Me!</strong></h3>
  </div>
</div>

html, body, .wrapper {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  background: lightblue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.message {
  margin-top: 15px;
  color: #ffffff;
}
.checkbox input[type="checkbox"] {
    display: none;
}
input[type=checkbox]:checked ~ .bubble {
  animation: explode .07s  forwards ease-out;
}
.bubble {
  display: block;
  background-color: white;
  border-radius: 50px;
  box-shadow: inset 0px 0px 12px 2px lightblue;
  opacity: 0.92;
  height: 100px;
  width: 100px;
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-iteration-count: infinite;
  animation-name: float;
  -webkit-animation-name: float;
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  animation-direction: alternate;
}

/* ANIMATIONS */
@keyframes explode {
 0% { opacity: 1; }
 100% { transform: scale(1.3); opacity: 0; }
}
@keyframes float {

  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    -moz-transform: rotateX(0deg) translateY(0px);
    -ms-transform: rotateX(0deg) translateY(0px);
    -o-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
    }

  50% {
    -webkit-transform: rotateX(0deg) translateY(15px) translateX(5px);
    -moz-transform: rotateX(0deg) translateY(15px) translateX(5px);
    -ms-transform: rotateX(0deg) translateY(15px) translateX(5px);
    -o-transform: rotateX(0deg) translateY(15px) translateX(5px);
    transform: rotateX(0deg) translateY(15px) translateX(5px);
}
  100% {
    -webkit-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -moz-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -ms-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -o-transform: rotateX(0deg) translateY(0px) translateX(1px);
    transform: rotateX(0deg) translateY(0px) translateX(1px);
  }

}

function pop() {
    if (document.getElementById("checkbox").checked == true) {
      var popSound = new Audio('https://glotacosm.com/pop1.wav');
      popSound.play();
    }
}