JSFiddle - React, Tailwind, and code Playground

by UA VXP

HTML

<div id="b" class="button"> submit </div>
<div id="e" class="button"> error</div>

CSS

.button {
    width: 150px;
    border-radius: 100px;
    height: 30px;
    padding: 10px 10px 0;
    border: 2px solid #1ECD97;      
    text-align: center;
    transition: all .3s;
    cursor: pointer;
    color: #1ECD97;
    text-transform: uppercase;
    font-family: Helvetica, Arial, Sans-Serif;
    font-weight: bold;
    margin: 10px auto;
}

.button:hover {
    background-color: #1ECD97;
	color: #fff;
}

.button.load {
    width: 30px;
    padding: 7px;
    border-left-color: #eee;
    border-top-color: #eee;

    animation:spin 3s linear infinite;
    /* чтобы не вращалась кнопка, пока еще не круглая */
    animation-delay: .3s;
}

.button.success {
    background: #1ECD97;
    color: #fff;
}

.button.error {
    background: #FB797E;
    color: #fff;
    border-color: #FB797E;
}

.button b {
     animation: showB .6s ease;
}

@keyframes showB { 
    0% { transform: scale(.1); },
    100% { transform: scale(1); } }

@keyframes spin { 100% { transform:rotate(360deg); } }

JavaScript

var b = document.getElementById('b');
b.onclick = function(e) {
  b.className = "button load";   
  b.innerHTML = ""; 
    
  setTimeout(function() {
      b.className = "button success";
      b.innerHTML = "<b>OK</b>";
  }, 2000);
}

var eb = document.getElementById('e');
eb.onclick = function(e) {
  eb.className = "button load";   
  eb.innerHTML = ""; 
    
  setTimeout(function() {
      eb.className = "button error";
      eb.innerHTML = "<b>X</b>";
      setTimeout(function() {
      	eb.className = "button";
      	eb.innerHTML = "<b>error</b>";
  	}, 2000);
  }, 2000);
}