JSFiddle - React, Tailwind, and code Playground

by Shankar

HTML

<script src="jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">
    <div class="block">Success state<br><button class="button success">Save</button></div>
    <div class="block">Error state<br><button class="button error">Save</button></div>
    </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>

  </body>
</html>

CSS

.button {
  display: inline-block;
  /* min-width: 130px; */
  margin: 20px auto;
  background: #fefefe;
  color: #000;
  border:1px solid #ccc;
  font-size: 1.2em;
  padding: 5px 10px;
  border-radius: 4px;
  text-align: center;
  position: relative;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* border: 0; */
  transition: border-radius linear 0.05s, width linear 0.05s;
}
.button:focus {
  outline: 0;
}
.button.animate {
  width: 48.1818181818px;
  height: 48.1818181818px;
  min-width: 0;
  border-radius: 50%;
  color: transparent;
  border:2px solid #cccc;
}
.button.animate:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border: 4px solid #8bc34a;
  border-radius: 50%;
  border-left-color: transparent;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: spin ease-in 2.5s forwards;
  animation-name: spin;
  -webkit-animation-name: spin;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.button.animate.success:before {
  position: absolute;
  content: "";
  width: 20px;
  height: 7.5px;
  border: 4px solid #8bc34a;
  border-right: 0;
  border-top: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0);
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  -webkit-animation: success ease-in 0.15s forwards;
  animation: success ease-in 0.15s forwards;
  animation-delay: 2.5s;
}
.button.animate.error {
  position: relative;
  -webkit-animation: vibrate ease-in 0.5s forwards;
  animation: vibrate ease-in 0.5s forwards;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.button.animate.error:before {
  color: #fff;
  position: absolute;
  content: "!";
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
...

JavaScript

var animateButton = function(e) {
  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');
  e.target.classList.add('animate');
  e.target.classList.add('animate');
  setTimeout(function(){
    e.target.classList.remove('animate');
  },5000);
};

var classname = document.getElementsByClassName("button");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', animateButton, false);
}