JSFiddle - React, Tailwind, and code Playground

HTML

<button class="test">hello world</button>

CSS

.test {
  font-size: 300%;
  color: white;
  background-color: darkblue;
  position: relative;
}

.test::after {
  content: "";
  display: inline-block;
  transition: background .15s ease-in-out;
  background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.03) 1%,hsla(0,0%,100%,.6) 30%,hsla(0,0%,100%,.85) 50%,hsla(0,0%,100%,.85) 70%,hsla(0,0%,100%,.85) 71%,hsla(0,0%,100%,0));
  width: 35%;
  height: 100%;
  transform: skew(-15deg,0deg);
  animation: move 2s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

@keyframes move {
  0%
  {
    left:0;
    opacity:0
  }
  
  5%
  {
    opacity:.05
  }
  
  48%
  {
    opacity:.2
  }
  
  80%
  {
    opacity:0
  }
  
  to
  {
    left:75%
  }
}