JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="container">
  <button id="button"></button>
</div>

CSS

.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: #fff;
	border: 2px solid #1ECD97;
	color: #1ECD97;
	letter-spacing: 1px;
	text-shadow: 0;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.25s ease;
}

button:hover {
	color: white;
	background: #1ECD97;
}

button:active {
	letter-spacing: 2px;
}

button:after {
	content: "SUBMIT";
}

.onclic {
	width: 40px;
	border-color: #bbbbbb;
	border-width: 3px;
	font-size: 0;
	border-left-color: #1ECD97;
	animation: rotating 2s 0.25s linear infinite;
}

.onclic:after {
	content: "";
}

.onclic:hover {
	color: #1ECD97;
	background: white;
}

.validate {
	font-size: 13px;
	color: white;
	background: #1ECD97;
}

.validate:after {
	font-family: 'FontAwesome';
	content: "\f00c";
}

@keyframes rotating {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

JavaScript

$(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 );
    }
  });