Animation not working properly?

Question

css

Hello! The shine animation does not work correctly. You want the effect to span the entire width of the button.

<div class="al-explore-button-wrapper">
  <a>
    <button class="al-explore-button">Text</button>
  </a>
</div>

.al-explore-button {
  height: 64px;
  padding: 0 60px;
  font-size: 16px;
  font-weight: 700;
  color: @al-main-color-2;
  background: @al-main-color-9;
  border: 2px solid @al-main-color-2;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    transform: translateX(-100%) ;
    animation: shine infinite;
    animation-duration: 4s;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0),
          rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
  }

  @keyframes shine {
    30% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  &:hover {
    color: @al-hover-color;
    border-color: @al-hover-color;
  }
}

.al-explore-button-wrapper {
  padding-top: 45px;
  padding-bottom: 30px;
  background-color: @al-main-color-9;
  text-align: center;
}