JSFiddle - React, Tailwind, and code Playground

by Nikolay Petrov

HTML

<div class="button" tabindex="2">US</div>

CSS

body {
  text-align: center;
}
.button:focus {
  background:red !important;
}
.button {
  border:1px solid red;
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  font-size: 52px;
  transition: all 0.4s ease-in;
  outline: 0;
}
.button:before {
    content: '';
    background-color: gray;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0.001, 0.001);
}
.button:focus:before {
    animation: fav_click 0.8s ease-out;
}
@keyframes fav_click {
  50% {
    transform: scale(1.5, 1.5);
    opacity: 0;
  }
  99% {
    transform: scale(0.001, 0.001);
    opacity: 0;
  }
  100% {
    transform: scale(0.001, 0.001);
    opacity: 1;
  }
}