<div class="container">
  <button id="button"></button>
</div>
@import url('https://fonts.googleapis.com/css?family=Quicksand');

$tomato: tomato;
$gray: #000;
* {
  font-family: 'Quicksand', sans-serif;
  background: #000;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -65px;
  margin-top: -20px;
  width: 130px;
  height: 40px;
  text-align: center;
}
button {
  outline: none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius: 40px;
  background: transparent;
  border: 3px solid $tomato;
  color: $tomato;
  letter-spacing: 2px;
  text-shadow: 0;
  font: {
    size: 12px;
    weight: bold;
  }
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    color: #fff;
    background: $tomato;
  }
  &:active {
    letter-spacing: 2px;
  }
  &:after {
    content: "S|U|B|M|I|T";
  }
}
.onclic {
  width: 40px;
  border-color: $gray;
  border-width: 10px;
  font-size: 0;
  border-left-color: $tomato;
  animation: rotating 2s 0.25s linear infinite;
  
  &:after {
    content: "";
  }
  &:hover {
    color: $tomato;
    background: #fff;
  }
}
.validate {
  font-size: 13px;
  color: #fff;
  background: $tomato;
  &:after {
    font-family: 'FontAwesome';
    content: "|\f00c|";
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
View Compiled
$(function() {
  $("#button").click(function() {
    $("#button").addClass("onclic", 250, validate);
  });
  
  function validate() {
    setTimeout(function() {
      $("#button").removeClass("onclic");
      $("#button").addClass("validate", 450, callback);
    }, 2250);
  }
  function callback() {
    setTimeout(function() {
      $("#button").removeClass("validate");
    }, 1250);
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js