* {

  box-sizing: border-box;

}



svg {

  position: absolute;

  top: -4000px;

  left: -4000px;

}



#gooey-button {

  padding: 1rem;

  font-size: 1rem;

  border: none;

  color: white;

  filter: url("#gooey");

  position: relative;

  background-color: black;

  cursor:pointer;

}

#gooey-button:focus {

	outline: none;
}

body #gooey-button.active {
	
	color:#F9A935;
}

#gooey-button .bubbles {

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

}

#gooey-button .bubbles .bubble {

  background-color: black;

  border-radius: 100%;

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  z-index: -1;

}

#gooey-button .bubbles .bubble:nth-child(1) {

  left: 32px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-1 3.02s infinite;

          animation: move-1 3.02s infinite;

  -webkit-animation-delay: 0.2s;

          animation-delay: 0.2s;

}

#gooey-button .bubbles .bubble:nth-child(2) {

  left: 78px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-2 3.04s infinite;

          animation: move-2 3.04s infinite;

  -webkit-animation-delay: 0.4s;

          animation-delay: 0.4s;

}

#gooey-button .bubbles .bubble:nth-child(3) {

  left: 98px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-3 3.06s infinite;

          animation: move-3 3.06s infinite;

  -webkit-animation-delay: 0.6s;

          animation-delay: 0.6s;

}

#gooey-button .bubbles .bubble:nth-child(4) {

  left: 26px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-4 3.08s infinite;

          animation: move-4 3.08s infinite;

  -webkit-animation-delay: 0.8s;

          animation-delay: 0.8s;

}

#gooey-button .bubbles .bubble:nth-child(5) {

  left: 61px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-5 3.1s infinite;

          animation: move-5 3.1s infinite;

  -webkit-animation-delay: 1s;

          animation-delay: 1s;

}

#gooey-button .bubbles .bubble:nth-child(6) {

  left: 55px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-6 3.12s infinite;

          animation: move-6 3.12s infinite;

  -webkit-animation-delay: 1.2s;

          animation-delay: 1.2s;

}

#gooey-button .bubbles .bubble:nth-child(7) {

  left: 53px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-7 3.14s infinite;

          animation: move-7 3.14s infinite;

  -webkit-animation-delay: 1.4s;

          animation-delay: 1.4s;

}

#gooey-button .bubbles .bubble:nth-child(8) {

  left: 18px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-8 3.16s infinite;

          animation: move-8 3.16s infinite;

  -webkit-animation-delay: 1.6s;

          animation-delay: 1.6s;

}

#gooey-button .bubbles .bubble:nth-child(9) {

  left: 63px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-9 3.18s infinite;

          animation: move-9 3.18s infinite;

  -webkit-animation-delay: 1.8s;

          animation-delay: 1.8s;

}

#gooey-button .bubbles .bubble:nth-child(10) {

  left: 34px;

  width: 25px;

  height: 25px;

  -webkit-animation: move-10 3.2s infinite;

          animation: move-10 3.2s infinite;

  -webkit-animation-delay: 2s;

          animation-delay: 2s;

}



@-webkit-keyframes move-1 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -86px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}



@keyframes move-1 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -86px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-2 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -130px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-2 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -130px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-3 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -99px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-3 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -99px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-4 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -112px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-4 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -112px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-5 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -104px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-5 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -104px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-6 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -77px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-6 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -77px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-7 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -98px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-7 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -98px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-8 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -68px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-8 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -68px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-9 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -66px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-9 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -66px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@-webkit-keyframes move-10 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -51px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}

@keyframes move-10 {

  0% {

    transform: translate(0, 0);

  }

  99% {

    transform: translate(0, -51px);

  }

  100% {

    transform: translate(0, 0);

    opacity: 0;

  }

}