<div><button><span>Submit</span></button></div>
$height: 60px;
$width: 220px;

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

div {
  position: relative;
}

button {
  background-color: white;
  border: solid 2px #1ECD97;
  color: #1ECD97;
  width: $width;
  height: $height;
  font-size: 18px;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.4s ease;  
  &:focus {
    outline: none;
  }
  &::-moz-focus-inner {
    border: none;
    outline: none;
  }
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #1ECD97;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 8px;
    border-left: solid 5px white;
    border-bottom: solid 5px white;
    opacity: 0;
    transform: rotate(-45deg);
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
  }
}

.circle {
  animation-delay: 500ms, 3000ms;
  animation-duration: 300ms, 800ms;
  animation-timing-function: ease-out, ease-in;
  animation-fill-mode: forwards, forwards;
  animation-name: circle, button_grow;
   &:before {
    animation-delay: 800ms;
    animation-duration: 2500ms;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-name: grow;
  }
  &:after {
    animation-delay: 4500ms;
    animation-duration: 400ms;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-name: check;
  }
}

.click {
  animation-delay: 0s, 600ms;
  animation-duration: 300ms, 100ms;
  animation-timing-function: ease-in-out, linear;
  animation-fill-mode: none, forwards;
  animation-name: bounce, disapear; 
}


@keyframes bounce {
  30% {
    font-size: 20px;
  }
}

@keyframes circle {
  100% {
    width: $height;
    border: solid 6px #ccc;
  }
}

@keyframes disapear {
  100% {
    opacity: 0;
  }
}

@keyframes grow {
  99.9% {
    width: $height;
    height: $height;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes button_grow {
  0% {
    border: solid 2px #1ECD97;
    background-color: #1ECD97;
    width: $height;
  }
  100% {
    border: solid 2px #1ECD97;
    background-color: #1ECD97;
    width: $width;
  }
}

@keyframes check {
  25% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: scale(1.3) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-45deg);
  }
}
View Compiled
$(document).ready(() => {
  $("button").on("click", function() {
    $(this).addClass("circle")
    $(this).children("span").addClass("click")    
    setTimeout(function(){
      $(this).removeClass("circle")
      $(this).children("span").removeClass("click")
    }.bind(this),9000)
  })
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js