JSFiddle - React, Tailwind, and code Playground

by xalvin11

HTML

<div id="wrap">
  <div id="top-button"></div>
  <div id="under-button"></div>
</div>

CSS

#wrap {
  position: relative;
  width: 300px;
  margin: auto;
  margin-top: 50px;
}

#top-button {
  width: 300px;
  height: 200px;
  border-radius: 50%;
  background: #ee1223;
  position: absolute;
  z-index: 1;
  top: 0;
}

#under-button {
  position: absolute;
  width: 300px;
  height: 200px;
  margin-top: 100px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  background: #bb0102;
  z-index: 0;
}

JavaScript

$(document).ready(function() {

  var snd = new Audio("Kid_Laugh-Mike_Koenig.wav"); // buffers automatically when created

  $("#top-button").click(function() {

    snd.play();

    $(this).animate({
        top: 20
      },
      function() {

        $("#top-button").animate({
          top: 0
        });
      });

    $("#under-button").animate({
        height: 180,
        top: 20
      },
      function() {
        $("#under-button").animate({
          height: 200,
          top: 0
        });
      }
    );

  });

});