/*
    Project: Bubbly-Button
    Created: Thursday, 01 January 2022
    Author: Jamshid Elmi 
    Tutorial: https://youtu.be/jkaqJVtjb7I
  */

 .green-button {
   background-color: rgb(3, 219, 32);
   color: #fff;
   border-radius: 1rem;
   border: none;
   cursor: pointer;
   position: relative;
   transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
   box-shadow: 0 2px 25px rgb(3, 219, 32, 0.8);
 }

 .green-button:before,
 .green-button:after {
   position: absolute;
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   left: 0%;
   z-index: 1;
   transition: all ease-in-out 0.5s;
   background-repeat: no-repeat;
 }

 .green-button:before,
 .green-button:after {
   display: none;
   background-image:
     radial-gradient(circle, rgb(3, 219, 32) 20%, transparent 20%),
     radial-gradient(circle, transparent 20%, rgb(3, 219, 32) 20%, transparent 30%),
     radial-gradient(circle, rgb(3, 219, 32) 20%, transparent 20%),
     radial-gradient(circle, rgb(3, 219, 32) 20%, transparent 20%),
     radial-gradient(circle, transparent 10%, rgb(3, 219, 32) 15%, transparent 20%),
     radial-gradient(circle, rgb(3, 219, 32) 20%, transparent 20%),
     radial-gradient(circle, rgb(3, 219, 32) 20%, transparent 20%),
     radial-gradient(circle, rgb(3, 219, 32) 20%, transparent 20%),
     radial-gradient(circle, rgb(3, 219, 32) 20%, transparent 20%);
   background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
     10% 10%, 18% 18%;
 }

 .green-button:before {
   top: -75%;
 }

 .green-button:after {
   bottom: -75%;
 }

 .green-button:active {
   transform: scale(0.9);
   background-color: rgb(3, 219, 32, 0.8);
   box-shadow: 0 2px 25px rgba(3, 219, 32, 0.2);
 }

 .green-button.animate:before {
   display: block;
   animation: greentopBubbles ease-in-out 0.75s forwards;
 }

 .green-button.animate:after {
   display: block;
   animation: greenbottomBubbles ease-in-out 0.75s forwards;
 }

 @keyframes greentopBubbles {
   0% {
     background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
       40% 90%, 55% 90%, 70% 90%;
   }

   50% {
     background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
       50% 50%, 65% 20%, 90% 30%;
   }

   100% {
     background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
       50% 40%, 65% 10%, 90% 20%;
     background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
   }
 }

 @keyframes greenbottomBubbles {
   0% {
     background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
       70% -10%, 70% 0%;
   }

   50% {
     background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
       105% 0%;
   }

   100% {
     background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
       110% 10%;
     background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
   }
 }