JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn black grow">
</button>
<button class="btn white grow">
</button>
<br>
<button id="btn-grow">
Grow 'em back
</button>

CSS

.btn {
  z-index: 3;
  position: relative;
  width: 30px;
  height: 30px;
  margin: 2px;
  border-radius: 50%;
  background-color: blue;
  border-color: transparent;
  animation-fill-mode: forwards;
  animation-name: shrink;
  animation-duration: 0.3s;
}

.button:focus {
  outline: none;
} 

.grow {
  animation-name: grow;
}

.black {
    background: green;
}

.white {
    background: white;
    border: 2px solid black;
}

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

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

JavaScript

var buttons = Array.prototype.slice.call(
	document.getElementsByClassName('btn'));

buttons.forEach(function(button) {
  button.addEventListener('click', function(event) {
    if (event.target.classList.contains('btn')) {
      event.target.classList.remove('grow');
    }
  });
});
  
document
	.getElementById('btn-grow')
  .addEventListener('click', function(event) {
    buttons.forEach(function(button) {
      button.classList.add('grow');
    });
  });