I added this animation below to a button which triggers whenever the page loads.

  .shadow-pop-br {
    animation: shadow-pop-br 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

 @keyframes shadow-pop-br {
    0% {
      box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
      transform: translateX(0) translateY(0) rotateZ(5deg) rotateX(10deg) rotateY(-15deg);
    }
    100% {
      box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
      transform: translateX(-8px) translateY(-8px) rotateZ(5deg) rotateX(10deg) rotateY(-15deg);
    }
  }

The buttons looks like the attached image button

My button class looks like this:

.button2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid #000000;
    border-radius: 0px;
    padding: 0;
    text-decoration: none;
    color: #000000;
    position: relative;
    overflow: hidden;
    transform: rotateZ(5deg) rotateX(10deg) rotateY(-15deg); /* 3D tilt effect */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth transitions */
    height: 130px; /* Height of the button */
    width: 130px; /* Width of the button */
    cursor: pointer;
    animation: shadow-pop-br 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both; /* Animation on load */
  }

I was trying to add an animation of the button popping up even more on hover and another one where it gets pressed down on mouse click, im trying to translate the button using

 .button2:active {
    transform: translate(2px, 2px) rotateZ(5deg) rotateX(10deg) rotateY(-15deg);
}

but nothing seems to work.
How do I implement an animation of the button popping outwards when I hover over it and also the button gets pressed downwards when i click or hold click on it?