JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div class="button__wrap">
  <button class="button btn1" style="--hue: 162.03381670949574" onclick="popUp_model()" >Show me attention</button>
  </div>
<div class="button__wrap">
  <button class="button btn2" style="--hue: 162.03381670949574" onclick="popUp_model()">Show me attention</button>
  <div class="button__shadow"></div>
</div>
</div>

CSS

body{
background: black;
}

.wrapper { display: flex; }


.btn1 {--txt: "About Me";}
.btn2 {--txt: "Projects";}

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      --padding: 1rem 1.25rem;
      cursor: pointer;
      padding: var(--padding);
      border: 4px solid;
      border-color: #00fffe;
      color: transparent;
      font-weight: bold;
      font-size: 1.25rem;
      transition: background 0.1s ease;
      background: hsl(var(--grey), 100%, 50%);
              animation-name: flow-and-shake;
      -webkit-animation-duration: calc(var(--speed) * 1s);
              animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
    }
    .button:after {
      content: var(--txt);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: var(--padding);
      color: #fff;
    }
    .button:hover {
      background: hsl(var(--grey), 100%, 40%);
      --speed: 0.1;
      --rotation: -1;
      --y: -1;
      --x: 1;
    }

    @-webkit-keyframes flow-and-shake {
      0%, 100% {
        transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
      }
      50% {
        transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
      }
    }