Animated Countdown Timer

index.css

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
html, body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FC6D6D;
  overflow: hidden;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: 50%;
  width: 57.7%;
  background-color: #343F4F;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(-30deg) skewX(30deg);
      -ms-transform: rotate(-30deg) skewX(30deg);
          transform: rotate(-30deg) skewX(30deg);
  z-index: 1;
}
body:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  padding-bottom: 50%;
  width: 57.7%;
  background-color: #343F4F;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(-30deg) skewX(30deg);
      -ms-transform: rotate(-30deg) skewX(30deg);
          transform: rotate(-30deg) skewX(30deg);
  z-index: 1;
}

.card {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 375px;
  height: 667px;
  background-color: #343F4F;
  overflow: hidden;
}
.card .card__counter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: "Anonymous Pro";
  font-weight: bold;
  color: white;
}
.card .card__counter .card__counter__num {
  font-size: 150px;
  padding: 0 20px;
  z-index: 15;
}
.card .card__counter span {
  margin-top: 45px;
  font-size: 65px;
  opacity: 1;
  -webkit-transition: opacity .3s;
          transition: opacity .3s;
  z-index: 3;
}
.card .card__button {
  position: absolute;
  bottom: 85px;
  left: calc(50% - 37.5px);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #FC6D6D;
  cursor: pointer;
  z-index: 10;
}
.card .card__button.card__button--triggered {
  -webkit-animation: button 3.9s linear;
          animation: button 3.9s linear;
}
.card .card__button.card__button--triggered ~ .card__counter span {
  opacity: 0;
}
.card .card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  box-shadow: inset 0px 0px 85px 70px #343F4F;
}

@-webkit-keyframes button {
  4.9% {
    bottom: -250px;
    left: calc(50% - 500px);
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
  }
  5.1% {
    bottom: 0;
    left: calc(50% - 187.5px);
    width: 375px;
    height: 667px;
    border-radius: 0;
  }
  80% {
    bottom: 0;
    left: calc(50% - 187.5px);
    width: 375px;
    height: 0;
    border-radius: 0;
    opacity: 1;
  }
  85.1% {
    bottom: 0;
    left: calc(50% - 187.5px);
    width: 375px;
    height: 0;
    border-radius: 0;
    visibility: hidden;
  }
  85.2% {
    bottom: 85px;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    visibility: hidden;
  }
  95% {
    bottom: 127.5px;
    left: 50%;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    visibility: visible;
  }
  100% {
    bottom: 85px;
    left: calc(50% - 37.5px);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    visibility: visible;
  }
}

@keyframes button {
  4.9% {
    bottom: -250px;
    left: calc(50% - 500px);
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
  }
  5.1% {
    bottom: 0;
    left: calc(50% - 187.5px);
    width: 375px;
    height: 667px;
    border-radius: 0;
  }
  80% {
    bottom: 0;
    left: calc(50% - 187.5px);
    width: 375px;
    height: 0;
    border-radius: 0;
    opacity: 1;
  }
  85.1% {
    bottom: 0;
    left: calc(50% - 187.5px);
    width: 375px;
    height: 0;
    border-radius: 0;
    visibility: hidden;
  }
  85.2% {
    bottom: 85px;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    visibility: hidden;
  }
  95% {
    bottom: 127.5px;
    left: 50%;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    visibility: visible;
  }
  100% {
    bottom: 85px;
    left: calc(50% - 37.5px);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    visibility: visible;
  }
}
.shadow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 55px;
  width: 375px;
  height: 667px;
  content: '';
  box-shadow: 0 0 100px 0 black;
  z-index: 10;
}

index.html

<div class="shadow"></div> <div class="card"> 	<div class="card__overlay"></div> 	<div class="card__button"></div> 	<div class="card__counter"> 		<span>20</span> 		<div id="num" class="card__counter__num"> 			30 		</div> 		<span>40</span> 	</div> </div>

index.js

button = $('.card__button');

button.on('click', function clicked() {
		$(this).addClass('card__button--triggered');

		$(this).off('click', clicked);

		var count = 30;
		var counter = setInterval(timer, 100);

		function timer() {
				count -= 1;
				if (count === -1) {
						clearInterval(counter);

						setTimeout(function() {
								count = 30;
								document.getElementById("num").innerHTML = count;

								button.removeClass('card__button--triggered');
								button.on('click', clicked);

						}, 800);

						return;
				}
				document.getElementById("num").innerHTML = count;
		}

});

The button doesn't work. Could you help me out with this?